Question 79376 in Flutter Question posted in
The official Flutter documentation can be found here.

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

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

  1. 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?)

  2. The download URL of the bytes file is stored in Firestore.

  3. 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,
        ),
      ),
),
Tags:

3

Answers


  1. 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);
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search