Unable to upload file to Firebase Storage using Flutter Web's image_picker

Question

I'm using flutter web. I'm trying to upload an image using image_picker and store in firebase storage. The image_picker returns PickedFile type. So, I'm converting it to File type using File image = File(pickedFile.path) and then upload using ref.putFile(image). But the file doesn't get uploaded. I'm getting a Namespace exception. Any ideas?

PickedFile pickedFile =
          await picker.getImage(source: ImageSource.gallery);

      File newFile = File(pickedFile.path);
      var now = DateTime.now().millisecondsSinceEpoch;
      StorageReference reference =
          FirebaseStorage.instance.ref().child("images/$now");
      StorageUploadTask uploadTask = reference.putFile(newFile);
      //Upload the file to firebase

      StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;

      // Waits till the file is uploaded then stores the download url
      String url = await taskSnapshot.ref.getDownloadURL();

The error I'm getting is

Error: Unsupported operation: _Namespace
    at Object.throw_ [as throw] (http://localhost:64148/dart_sdk.js:4322:11)
    at Function.get _namespace [as _namespace] (http://localhost:64148/dart_sdk.js:54027:17)
    at io._File.new.existsSync (http://localhost:64148/dart_sdk.js:51618:51)
    at firebase_storage.StorageReference.__.putFile (http://localhost:64148/packages/firebase_storage/firebase_storage.dart.lib.js:701:27)
    at add_product$46view._AddProductPageState.new.loadAssets (http://localhost:64148/packages/ecommerce_glasses/product/views/add_product.view.dart.lib.js:1234:38)
    at loadAssets.next (<anonymous>)
    at http://localhost:64148/dart_sdk.js:37211:33
    at _RootZone.runUnary (http://localhost:64148/dart_sdk.js:37065:58)
    at _FutureListener.thenAwait.handleValue (http://localhost:64148/dart_sdk.js:32049:29)
    at handleValueCallback (http://localhost:64148/dart_sdk.js:32596:49)
    at Function._propagateToListeners (http://localhost:64148/dart_sdk.js:32634:17)
    at _Future.new.[_completeWithValue] (http://localhost:64148/dart_sdk.js:32477:23)
    at async._AsyncCallbackEntry.new.callback (http://localhost:64148/dart_sdk.js:32499:35)
    at Object._microtaskLoop (http://localhost:64148/dart_sdk.js:37326:13)
    at _startMicrotaskLoop (http://localhost:64148/dart_sdk.js:37332:13)
    at http://localhost:64148/dart_sdk.js:32851:9

Paurakh Sharma Humagain · Accepted Answer · 2021-06-06 10:54:15Z

You don't have access to the file path in Flutter web.

Instead of trying to upload the file from a path you need to upload the file as bytes.

You can get the file as Uint8List using this,

final fileBytes = pickedFile.readAsBytes();

And in your storage code, you can put the data instead,

reference.putData(fileBytes);

So, your code should look something like this


PickedFile pickedFile =
          await picker.getImage(source: ImageSource.gallery);

final fileBytes = pickedFile.readAsBytes();
var now = DateTime.now().millisecondsSinceEpoch;
StorageReference reference =
  FirebaseStorage.instance.ref().child("images/$now");

StorageUploadTask uploadTask = reference.putData(fileBytes);

//Upload the file to firebase
StorageTaskSnapshot taskSnapshot = await uploadTask.onComplete;

// Waits till the file is uploaded then stores the download url
String url = await taskSnapshot.ref.getDownloadURL();

Dharman · Accepted Answer · 2020-07-31 17:20:20Z

0

Add this scripts in index.html

<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>    
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>

this is how im doing it

// ignore: avoid_web_libraries_in_flutter
import 'dart:html' as html;

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase/firebase.dart' as fb;

Future<Uri> _uploadImageFile({
  @required html.File image,
  @required String imageName,
}) async {
fb.StorageReference storageRef = fb.storage().ref('category/$imageName');
fb.UploadTaskSnapshot uploadTaskSnapshot =
    await storageRef.put(image).future;

 Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
 return imageUri;
}

edited Jul 31, 2020 at 17:20

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Jul 31, 2020 at 17:15

GJJ2019

5,2623 gold badges17 silver badges24 bronze badges

1 Comment

GJJ2019 Over a year ago

im using this package image_picker_web: ^1.0.9

Vít Skalický · Accepted Answer · 2021-06-06 08:57:02Z

0

You cannot use File newFile = File(pickedFile.path); in Flutter web. I don't know how the Firebase API works, but you will probably have to make use of pickedFile.readAsBytes().

answered Jun 6, 2021 at 8:57

Vít Skalický

6536 silver badges19 bronze badges

Collectives™ on Stack Overflow

Unable to upload file to Firebase Storage using Flutter Web's image_picker

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related