CODEWITHSUNDEEP
firebaseflutterfirebase-storageflutter-web
Balaji Kartheeswaran
Balaji Kartheeswaran

Reputation: 1098

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

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

Upvotes: 2

Views: 2243

Answers (3)

Paurakh Sharma Humagain
Paurakh Sharma Humagain

Reputation: 785

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();

Upvotes: 2

V&#237;t Skalick&#253;
V&#237;t Skalick&#253;

Reputation: 651

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().

Upvotes: 0

GJJ2019
GJJ2019

Reputation: 5182

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;
}

Upvotes: 0

Related Questions