Android Image Uploading With Retrofit and Node JS With Examples

In this tutorial, we’ll be creating an android application that uploads an image using Retrofit MultiPart Request to the localhost server. We’ll create a simple server using Node JS first. Let’s get started.

Setting Up Node JS Server

Let’s set up a simple Node JS localhost server where we can upload files.

We’ll start by creating a separate directory for the node js server. Let’s name it jdserver
Inside the directory, we’ll install the following packages using npm. Ensure that node and npm are installed.

Multer: is an image upload library. It handles getting formdata from requests.
Express is a popular web framework.

Let’s create a subfolder uploads which will contain the uploaded images by doing mkdir uploads.

Inside the jdserver directory, we’ll create a multipart.js file which contains the code for the server setup and uploading the image:

The upload file name is changed using the crypto package and stored in the uploads directory.
The server would run on 3000 port on the localhost.

In order to start the server, do the following:
node multipart.js from the jdserver directory on the terminal.

When you open your localhost in the web browser (127.0.0.1:3000), this is what you should see:

android image upload display node js server

Thus we are able to upload an image to the server. It gets saved in the uploads dir as shown below:

Setting Up Node JS Server

In order to test whether the POST works, we can install the httpie in the terminal.

One way is by using homebrew.

To test the POST for multipart image upload we can run the following on the terminal:

wallpaper.png if exists in the current directory in the terminal would be uploaded.

This gets logged in the terminal:

image-upload-node-js-log-terminal

Now that all is set on the server side, let’s implement the same in our Android Application.

Retrofit MultiPart Upload

Sending an Image via a network call is different from sending text/plain or x-www-urlencoded requests which are essentially texts/key value pairs respectively.

In order to send an Image, we need to create a MultiPartRequest.
In Retrofit, we need to use MultipartBody.Part and RequestBody for uploading the image.
MultipartBody.Part is used to pass the file and RequestBody is used to pass the plain text here.

In order to use MultiPart we need to annotate the POST request in retrofit with @Multipart

In the following section, we’ll use MultiPart for Image Uploading to the Node JS server hosted locally.

Project Structure

android-retrofit-image-upload-progress-nodejs-project

The build.gradle includes the following dependencies:

The AndroidManifest.xml looks like this:

android retrofit multipart nodejs manifest

We’ve added the relevant permissions and FileProvider is needed since Android Nougat for fetching image path.

Code

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

ApiService.java

Inside @Part annotation name we must specify the key which is the same as the one defined in the js file earlier i.e. “upload” along with the File.

MainActivity.java

In the above code, we need to ask for runtime permissions before anything.
The image bitmap retrieved from the camera/gallery image is eventually passed to the server in the multipart Retrofit request.

The base URL is the same as the IP of your system if you’re running the application on your phone connected via USB.

In the above code, the base URL is my current IP. You need to change it to yours when running the project.

Make sure that the server is up and running!

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

image-upload-node-js-log-terminal

And the file is now visible in the uploads directory:

android-retrofit-multipart-nodejs-manifest

That brings an end to this tutorial. You can download the project from the link below. It contains the multipart.js file which you can use to set up the server as explained at the beginning.

By admin

Leave a Reply