Home > Software design >  How to Upload Multiple images to FiresbaseStorage and get back the urls in JetpackCompose
How to Upload Multiple images to FiresbaseStorage and get back the urls in JetpackCompose

Time:11-22

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

CodePudding user response:

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) //           
  • Related