如何将多个图像上传到 FiresbaseStorage 并在 JetpackCompose 中取回 URL

Question

I got an idea from Alex Mamo How to upload an image to Firebase how to upload images to Firebase Storage and get back the URL back and upload to Firestore using MVVM and Hilt dependency but how to upload an ArrayList of images URI to Storage and get back the URLs.

I am getting the Selected Images Uri from the gallery in my ViewModel

    fun updateSelectedImageList(listOfImages: List<Uri>) {
    val updatedImageList = state.productImagesList.toMutableList()
    viewModelScope.launch {
        updatedImageList += listOfImages
        state = state.copy(
            productImagesList = updatedImageList.distinct()
        )
    }
}

Please correct me if my response is wrong for the list of Uri images

Repository

typealias AddCategoryResponse = Response<Boolean>
typealias AddContentUriResponse = Response<Uri>
typealias AddProductImagesResponse = Response<ProductImages>

suspend fun addProductImagesToFirebaseStorage(productImages: List<Uri>) : AddProductImagesResponse

suspend fun addMainCategoryImageToFirebaseStorage(imageUri: Uri,upcomingCat: Int) : AddContentUriResponse

suspend fun addMainCategoryToFirestore(mainCategory: MainCategory) : AddCategoryResponse

i wanted a create fuction to add multiple images and get back the updated images urls back method

my Implementation

@Singleton
class AdminRepositoryImpl @Inject constructor(
@Named("mainCategory")
private val categoryRef: CollectionReference,
@Named("product")
private val productRef: CollectionReference,
@Named("tags")
private val tagsRef: CollectionReference,

private val categoryImageStorage: FirebaseStorage,
) : AdminRepository {

override suspend fun addProductImagesToFirebaseStorage(productImages: List<Uri>): 
AddProductImagesResponse {
    return try {
        val date = System.currentTimeMillis()
        val productDownloadUrls: List<URL> = emptyList()
        productDownloadUrls = //Need to get Success Response of the List Images
  

    categoryImageStorage.reference.child("HomeFeed")
   .child("Products")
            .child("Products$date")

    }
}

override suspend fun addMainCategoryImageToFirebaseStorage(
    imageUri: Uri, upcomingCat: Int,
): AddContentUriResponse {
    return try {
       
            val date = System.currentTimeMillis()
            val downloadUrl =
                categoryImageStorage.reference.child("HomeFeed").child("SubCategory")
                    .child("SubCategoryImage$date")
                    .putFile(imageUri).await()
                    .storage.downloadUrl.await()
            Success(downloadUrl)
        }

    } catch (e: Exception) {
        Failure(e)
    }
}

Getting back the url for uploading a image

@Composable
fun AddCategoryImageToStorage(
viewModel: CategoryViewModel = hiltViewModel(),
addCategoryImageToStorage : (downloadUrl: Uri) -> Unit
) {
when(val addCategoryImageToStorageResponse = 
viewModel.addCategoryImageToStorageResponse){
    is Response.Loading -> ProgressBar()
 is Response.Success -> addCategoryImageToStorageResponse.data?.let{ downloadUrl - >
        LaunchedEffect(downloadUrl){
            addCategoryImageToStorage(downloadUrl)
        }
    }
    is Response.Failure -> LaunchedEffect(Unit){
        print(addCategoryImageToStorageResponse.e)
    }
  }

}

UseCases are also used

Answer 1

I actually wrote that article, and yes, it only explains how to upload a single file. But the mechanism to upload multiple files is almost the same, except for the fact that you should wait to upload all images. When you're calling putFile(Uri uri) method on a StorageReference object like below:

categoryImageStorage.reference.child("HomeFeed")
                              .child("SubCategory")
                              .child("SubCategoryImage$date")
                              .putFile(imageUri) //👈

The type of object that is returned is UploadTask . This class is a subclass of StorageTask , which in terms is a subclass of ControllableTask , which is also a subclass of CancellableTask , which finally is a subclass of Task . Because of the inheritance relationship between these classes, you can call await(), each time you upload a file. Since you need to upload multiple files, you need to add all those Task objects that result in a List<UploadTask> . Once the list is full of objects, pass that list to Tasks#whenAllSuccess(Collection> tasks) method. This method returns an object of type Task<List<TResult>> . That being said, you can call await() to wait for the upload operations to complete.

If the above operation is not fast enough, then please check my answer from the following post:

• This suspend function is taking very long time to execute,How can I optimize this?