Home > Net >  Correct order to upload images on firebase
Correct order to upload images on firebase

Time:01-02

To upload images for an object created by a user I store the images (selected by the user) in an array 'imagesList' as a File. When the user clicked upload (whole object) the following method saves the data on firebase:

TextButton(
     onPressed: () async {
        await uploadImage();
        await jobService.createJob(Job(
            titleTextEditorController.text.trim(),
            category,
            false,
            false,
            finalImageList));
        },
       child: Text('upload')),

The List finalImageList is filled in the first method 'uploadImage()'. I sourced it out in another method to get the await statement. The Code:

uploadImage() async {
  for (int i = 0; i < imageList.length; i  ) {
    _imageFile = imageList[i];

    String fileName = Path.basename(_imageFile!.path);

    Reference reference =
        FirebaseStorage.instance.ref().child('uploads/$fileName');

    firebase_storage.SettableMetadata(
        contentType: 'image/jpeg',
        customMetadata: {'picked-file-path': fileName});

    UploadTask uploadTask = reference.putFile(_imageFile!);
    uploadTask.whenComplete(() async {
      try {
        imageUrl = await reference.getDownloadURL();
        print('imageUrl'   imageUrl);
        finalImageList.add(imageUrl);
      } catch (onError) {
        print("Upload Error");
      }
    });
    await Future.value(uploadTask)
        .then((value) => {print('Upload file path ${value.ref.fullPath}')})
        .onError((error, stackTrace) =>
            {print('Upload file path error ${error.toString()}')});
  }
}

But the method is not fast enough to store the imageUrl's in finalImageList, so the Images is online but its not connected to the object in firebase. Is there a possibility to upload it immediately or the save the imageUrl correctly? Or is my code just in the wrong order?

CodePudding user response:

The FlutterFire UploadTask class extends Future, which means that you can use await on it to wait until the upload is done.

That means you can write your code much simpler as:

await reference.putFile(_imageFile!);
imageUrl = await reference.getDownloadURL();
finalImageList.add(imageUrl);
print('Upload file path ${value.ref.fullPath}')

With this change, your uploadImage will only complete after the download URL was added to finalImageList.

  • Related