Android MultiPart Image Upload Progress Retrofit NodeJS With Examples

This is the second tutorial in the Image Uploading with Retrofit series. In the first tutorial, we’d set up our NodeJS server on the localhost. Please refer to this tutorial before proceeding ahead to setup NodeJS server. In this tutorial, we’ll be implementing Image Uploading while showing the upload progress in our android application.

Retrofit MultiPart Image Upload Progress

We hope that you’ve successfully set up the Node JS server in the previous tutorial. In order to know the upload progress, we’ll use OkHttp.

OkHttp is handy in intercepting request and response calls. It has many recipes available here: OkHttp Recipes

We’ll be adapting one of the Recipes (Progress) in order to handle and display the Upload Progress.

The code for the is given below:

In the above code, we’ve defined UploadCallback Interface which will be implemented in the with the methods triggered on different events.

Inside the writeTo function, we calculate the bytes uploaded. Each time, it invokes a runnable class where we trigger the callback methods by calculating the progress (based on current upload length and file length in bytes).

Now that our OKHttp RequestBody is ready, we’re ready to integrate it into our MainActivity inside the retrofit call.

Project Structure



The code for the activity_main.xml layout is given below:

We’ve enclosed the fabUpload view inside a FrameLayout, since Android Support Design Library does not allow to toggle the visiblity of a FloatingActionButton present in a CoordinatorLayout due to layout anchors.

The code for the ApiService is the same as in the previous tutorial:


The code for the is given below:

In the above code,
We’ve used Runtime Permissions and Capturing Image From Camera And Gallery Using FileProvider.
Coming to the important differences, we’ve optimized the code such that the byte array that gets created from the Bitmap is done in a background thread in order to prevent freezing of the UI thread.
UploadCallbacks interface is implemented and the text view updates its value while the image uploads.

The output of the above application in action is given below:

android multipart retrofit upload progress nodejs output

That brings an end to this tutorial. You can download the project from the link below:

By admin

Leave a Reply