Uploading image in Android 11 with Retrofit and MVVM architecture

Hii fellow developers! Today we will gonna learn best way to upload image to the rest api with Retrofit and using MVVM architecture, This post content powered by MVVM pattern, its better to take a look at previous post about MVVM architecture first so you better follow up and inject required dependencies for this project,

Retrofit Fetch API with clean architecture MVVM

Lets get started~~

We will get required libraries and classes with below dependencies

If you followed previous post , you will know the use case of below interface, Here we are creating our interface for defining contracting methods

Here are the most important interface, we are using annotation @Multipart for defining the uploading file use case and see in the parameters we are using MultipartBody.Part for file(image) and RequestBody for form field, Both are annotated with @Part annotation

Below is the sample screenshot of uploading the image via postman

Now lets extends our interface in our ImageImplementation class

Lets see our MainActivityViewModel class

As you can see, we take imageFile_ live data variable of type File, by taking this approach we will make sure that incoming file will not be null, ofcourse you could do that in other ways, i find it more simple and robust

Then we have mainEvent_ live data variable of type of our event class, we will see that below, it is common approach to get all the possible events after calling rest api in an separate class and it makes our code more robust and clean

sealed class MainEvent {


    class Success(val jsonObject: Any) : MainEvent()
    class Failure(val m: String) : MainEvent()
    object Empty : MainEvent()
    object Loading : MainEvent()


}

Lets implement our upload image method in our viewmodel class

Lets understand what is happening here, We are taking profileImage variable of type RequestBody and we are creating an requestBody of type image by using our file

Then, in profileImageBody we are creating our MultipartBody.Part

val profileImageBody: MultipartBody.Part =
    MultipartBody.Part.createFormData(
        "file",
        file.getName(), profileImage
    )

Here we are multipart form data for image file, The first parameter of createFormData() method is the name of the parameter required for file that is “file”, and second is the name of the file we want to store as and third is the our requestbody which we created above

Now below for the second parameter we are creating RequestBody with the below method, The use of sendImageFile() method we will see in the activity class later

fun getMultiPartFormRequestBody(tag: String?): RequestBody {
    return RequestBody.create(MultipartBody.FORM, tag!!)

}

fun sendImageFile(file: File) {
    imageFile_.value = file

}

Above we are using ImagePicker and Dexter libraries to ease our task of picking up images from camera or gallery

We our in AndroidManifest.xml file! Above the most important line is this — android:requestLegacyExternalStorage=”true” which is needed for uploading images in android 11 and later and offcourse internet and read storage permission

Lets! initialize our ViewModel

private val mainActivityViewModel: MainActivityViewModel by viewModels()

We are back to our MainActivity file, we are getting the result of the picked image and sending the file to our viewmodel with the use of sendImageFile() method

Now here it is important to observe both the values mainEvent and imageFile within the scope of lifecycleScope as they handle the execution of suspending function

Now, by observing the event values of the MainEvent class, we are getting all possible resultants — Loading, Success and Failure we can use more as per our preference

Now, by observing the imageFile like this we make sure the onClickListener only works when we have an non null file , which makes our life easy

Congrats! You have uploaded the image successfully by using MVVM principles

Running on emulator

sk123411/image-upload-mvvm

Be ready to check out more exiting stuff in android..