Uploaded image is not previewing in firebase. It's file type is blank, flutter

Question

Unable to preview my image in firebase using flutter...

this is my firebase console screenshot.

Here is the code of Image picker service from gallery

Future<File?> getImageFromGallery() async {
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    if (pickedFile != null) {
      image = File(pickedFile.path);
      return image;
    } else {
      Fluttertoast.showToast(msg: 'Error , No Image Selected');
      return null;
    }
  }

Getting the file using an event and then Uploading to firebase storage:

on<SubmitUserFormDataEvent>((event, emit) async {
      emit(UserFormLoadingState());

     // uploading the picture to firebase storage & get url

      File file = event.profile_image_file;

      String baseName = file.path.split('/').last;

      Reference ref = FirebaseStorage.instance
          .ref()
          .child("profile_images/$baseName"); //generate a unique name

      await ref.putFile(file);
      String imageUrl = await ref.getDownloadURL();
      print(imageUrl);

it successfully uploaded to firebase and get downloadUrl. if i click the download url in chrome, it automatically starts downlaod, But image is not showing.. That't why i can't show it to UI.

Getting the download url I can't show the image to ui.. I want to preview my image like this. How can i do that?

Answer 1

add image extension to the file while uploading it to Firebase Storage like this

await ref.putFile(file,
SettableMetadata(
        contentType: "image/jpeg",
      ),
);