How to upload an image file to Firebase Storage and show it in the Flutter web app

Question

Good day,

I'm implementing a function that users can upload their picture on my Flutter Web app and the app shows it.

I'm trying to make this as below

When a user uploads an image file, it is uploaded on Firebase Storage as BYTES (I know that an image file itself can't upload by Flutter WEB app, must be converted to bytes. true?)
The download URL of the bytes file is stored in Firestore.
My app finds the download URL and shows the image file(bytes) using the URL if it is.

The method used is Image.network(downloadURL), but it seems the file in the url must be an image file, otherwise, throws an error.

I wonder how to show an image file converted to BYTES from the download URL in the Flutter WEB app.

Or upload an image file itself to Firebase Storage in the Flutter WEB app.

App finds download URL with below code

  String? profileDownloadURL;

  @override
  initState() {
    super.initState();
    email = FirebaseAuth.instance.currentUser!.email;
    getProfileURL();
  }

  getProfileURL() async {
    DocumentSnapshot<Map<String, dynamic>> documentSnapshot =
        await FirebaseFirestore.instance.collection('Users').doc(email).get();
    setState(() {
      profileDownloadURL = documentSnapshot.data()!['profileDownloadURL'];
    });

    print('profile: $profileDownloadURL');
  }

User can select an image file with below method

  startWebFilePicker() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();
    if (result != null) {
      final email = FirebaseAuth.instance.currentUser!.email;
      final storageRef = FirebaseStorage.instance.ref();
      final profileRef = storageRef.child(email!).child(result.files.single.name);
      try {
        // upload a byte-converted image file to Firebase Storage
        await profileRef.putData(result.files.single.bytes!);
        // update download URL on Firestore
        String downloadURL = await profileRef.getDownloadURL();
        FirebaseFirestore.instance.collection('Users').doc(email).set(
          {'profileDownloadURL': downloadURL},
          SetOptions(merge: true),
        );
      } on FirebaseException catch (e) {
        print('1: $e');
      } catch (e) {
        print('2: $e');
      }
    } else {
      // User canceled the picker
    }
  }

App shows an image as below

Container(
  child: profileDownloadURL != null
    ? CircleAvatar(
        radius: 100,
        backgroundImage: Image.network(
          profileDownloadURL!,
          fit: BoxFit.fill,
        ).image,
      )
    : const CircleAvatar(
        radius: 100,
        child: Icon(
          Icons.person,
        ),
      ),
),

Shion, I have provided the recommendations in my answer below, let me know if they were helpful. — Vaidehi Jamankar, Dec 13 '22 at 07:35

score 2 · Accepted Answer · answered Dec 09 '22 at 10:23

Try using sending metadata contentType: "image/jpeg" in await imageRef .putFile(selectedImagePath, metadata)

              try {
                final storageRef = FirebaseStorage.instance.ref();
                final imageRef = storageRef.child("no_image.jpg");
                final ImagePicker picker = ImagePicker();
                // Create file metadata including the content type

                XFile? image =
                    await picker.pickImage(source: ImageSource.gallery);

                if (image != null) {
                  File selectedImagePath = File(image.path);
                  var metadata = SettableMetadata(
                    contentType: "image/jpeg",
                  );
                  await imageRef
                      .putFile(selectedImagePath, metadata)
                      .whenComplete(() {
                    ShowSnack.showToast("File Uploaded...");
                  });
                } else {
                  ShowSnack.showToast("No file selected");
                }
              } on FirebaseException catch (e) {
                // ...
              }

See result

Check full example on gist - https://gist.github.com/akshaysinghhal/66e2ebaf61747040a76c62f826e8e8d1#file-upload_image-dart

score 1 · Answer 2 · answered Dec 09 '22 at 14:10

To upload a file to Cloud Storage, you first create a reference to the full path of the file, including the file name.Once you've created an appropriate reference, you then call the putFile(), putString(), or putData() method to upload the file to Cloud Storage.
A full example of an upload with progress monitoring and error handling can be found here
Additionally, I would suggest you review this thread Firebase Cloud Storage in Flutter.
Here are a few example of similar implementations:

Also take a look at these public blogs for more examples;not official by Google:

score 0 · Answer 3 · answered Dec 09 '22 at 06:00

0

FirebaseStorage storage = FirebaseStorage.instance;
Reference ref = storage.ref().child(pathname + DateTime.now().toString());
await ref.putFile(File(_image.path));
String imageUrl = await ref.getDownloadURL();
print(imageUrl);

answered Dec 09 '22 at 06:00

Sunil Shukla

69
7

It throws Error: On web `path` is always `null` – Shion Dec 09 '22 at 06:10

How to upload an image file to Firebase Storage and show it in the Flutter web app

3 Answers3

Linked