jeudi 4 novembre 2021

flutter web) Can't upload image to firebase storage

I'm developing both app and web. I'm going to take an image and upload it to Firebase. It works well in the app, but failed to upload it to storage on the web. The following are the packages and codes I used.

environment:
  sdk: ">=2.7.0 <3.0.0"

  firebase_core: ^0.5.0 
  firebase_auth: ^0.18.0 
  cloud_firestore: ^0.14.0 
  firebase_storage: ^4.0.0 
  image_picker: ^0.6.7 #+7
  image_picker_for_web: ^0.1.0 #web image picker

Code for image_picker. There is no problem using this to get an image.

  Future<void> _getImage({ImageSource source}) async {
    _image = await picker.getImage(source: source);
    //test
    setState(() {
      if (_image != null) {
        if (isWeb) {
          _pickedImage = Image.network(_image.path, fit: BoxFit.cover,);
          //_webStorageImage = File(_image.path); //storage upload test
          //print("image.path = $_webStorageImage");
        }
        else {
          _pickedImage = File(_image.path);
          print("image.path = $_pickedImage");
        }
      }
    });



//image container code
InkWell(
        onTap: () async {
          await _seletedDialogBox(context);
          print("addImageSelete = $addImageSelete");
          //이미지 선택
          if (addImageSelete) _getImage(source: ImageSource.gallery);
          setState(() {
            addImageSelete = false;
          });
        },
        child: _pickedImage == null
            ? Container(
                width: double.infinity,
                height: 300,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                ),
                child: Center(
                  child: Text(
                    "text12345",
                    style: TextStyle(color: Colors.grey[600]),
                  ),
                ),
              )
            //seleted image
            : Container(
                width: double.infinity,
                height: 300,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                ),
                child: isWeb
                    ? _pickedImage
                    : Image.file(
                        _pickedImage,
                        fit: BoxFit.cover,
                      ),
              ));

And this is the code for firebase upload. I think it's because the parameters of the uploadImage() method are different, but I don't know how to solve it.

_sharePostPrcedure() async {
    //loading when uploading
    showModalBottomSheet(
        context: context,
        builder: (_) => CustomLoading(),
        isDismissible: false,
        enableDrag: false);

    _getPostKey(context);

    //image resize -> firestorage image upload -> firestore post upload

    //upload image to storage
    isWeb //if web
    ? await imageNetworkRepo.uploadImage(_image.path as File, postKey: postKey) //fail!!!
    : await imageNetworkRepo.uploadImage(_pickedImage, postKey: postKey);

    //get user model
    UserModel usermodel =
        Provider.of<UserModelState>(context, listen: false).userModel;

    //image upload and post upload
    await postNetworkRepo.createNewPost(
        //postKey and postData
        postKey,
        PostModel.getMapForCreatePost(
            userKey: usermodel.userKey,
            username: usermodel.username,
            title: _titleController.text,
            caption: _captionController.text));

    //get image url
    String postImgLink = await imageNetworkRepo.getPostImageUrl(postKey);

    //update image url to POST
    await postNetworkRepo.updatePostImageUrl(
        postKey: postKey, firstImg: postImgLink);


    //back after complet
    Get.back();
    Get.back();
  }

image_network_repo.dart

    class ImageNetworkRepo {
  //get location and postKey
  Future<StorageTaskSnapshot> uploadImage(File originImage,
      {@required String postKey}) async {
    try {
      //image resized
      final File resized = await compute(getResizedImage, originImage);

      //upload storage (failed on Web?)
      final StorageReference storageReference =
      FirebaseStorage().ref().child(_getImagePathByPostKey(postKey));
      final StorageUploadTask uploadTask = storageReference.putFile(resized);
      return uploadTask.onComplete;
    } catch (e) {
      print(e);
      return null;
    }
  }

  //post firestore
  String _getImagePathByPostKey(String postKey) => 'post/$postKey/post.jpg';

  //get image url from storage
  Future<dynamic> getPostImageUrl(String postKey) {
    return FirebaseStorage()
        .ref()
        .child(_getImagePathByPostKey(postKey))
        .getDownloadURL();
  }
}

ImageNetworkRepo imageNetworkRepo = ImageNetworkRepo();

output debug error:

Error: Expected a value of type 'File', but got one of type 'String'

I think I need to modify this part, but I don't know what to do.

isWeb
? await imageNetworkRepo.uploadImage(_image.path as File, postKey: postKey)

May I know about this problem?

Thank you.




Aucun commentaire:

Enregistrer un commentaire