Android Upload File to Server with Progress using Retrofit

Hi everyone, “Uploading File or Image to Backend Server” this is something that we often need to do in many applications. We already learned this concept in many previous posts. But things keep changing in this tech world and old methods are obsolete now. That is why here I am with this Android Upload File to Server with Progress Tutorial. 

The method we will learn in this post is fully updated and will work in all devices, including Android 10.

Prerequisites

  • XAMPP Server: We will use it for the backend, and ofcourse we will be using PHP and MySQL here for the backend part. But if you are comfortable with some other tech for handling the backend you can do it. We basically just need the API that will accept a file.
  • Retrofit: We will be using this networking library in our Android Project.

If you want to learn building RESTFul API, that you can use in your production application then please subscribe to my YouTube channel and comment to any video that you want a production level RESTFul API Development Tutorial.

Subscribe to Simplified Coding

You can also learn the basics of RESTFul API Development using SLIM3 PHP Framework from the below given link.

Android Networking Tutorial using PHP, MySQL & Retrofit

Now let’s move into our post. We will start by designing our database.

What we will do is we will store the uploaded image to an uploads directory in the backend server and we will store the path to that image in our MySQL database. And you should remember this thing, we don’t store files in our MySQL database, we just store path to the file in the database.

Android Upload File to Server with Progress – Video

In case you are more comfortable watching video tutorial, then you can watch the above playlist that explains complete step by step guide about Uploading File to Server with Progress.

But in case you are ok reading a written tutorial, keep reading, we will do the same thing here.

Designing Database

  • We will be using a very simple table. So just open PhpMyAdmin (I hope your XAMPP Server is running) and create a database. In my case I have created a table named ImageUploader.
  • Now we need to create a table where we will store the uploaded files info. Run the following SQL query to create a table named uploads.

  • As you can see we have 3 columns in our table (id, path and description).

Building Image Upload API

  • We have the database, now let’s build the Image Upload API. For this I have a directory named ImageUploader inside my root folder that is htdocs for xampp.
  • Inside this directory we will create a file named DbConnect.php.

  • The above file will make our database connection. Now let’s create the script that will handle the file upload.
  • Create a file named Api.php and write the following code.

  • The above code handle two cases. The first one is to upload the file and the next is to fetch the uploaded files.
URL Method Parameters
http://localhost/ImageUploader/Api.php?apicall=upload POST image, desc
http://localhost/ImageUploader/Api.php?apicall=images GET

If you need the source code of the PHP Scripts, then you can get it from the below given link.

Download PHP Scripts

So we have the APIs ready, now let’s create our Android Project.

Android Upload File to Server with Progress

Creating an Android Project

  • I have created a new project named ImageUploader using an EmptyActivity. Once the project is loaded, we will add required dependencies and internet permission.
  • First add internet permission in your AndroidManifest.xml, you also need to add the usesCleartextTraffic=”true”. 

  •   Now we will add the required dependencies.

Adding Dependencies

  • Open app level build.gradle file and add the following dependencies inside dependencies block.

  • After adding these lines, sync the project.

Designing User Interface

  • Now let’s design the UI. Open activity_main.xml and write the following xml code.

  • The above XML Code will generate the following output.
android upload file to server
Android Upload File to Server with Progress
  • As you can see we have a very simple User Interface for our upload operation.
  • Now we need an Image to Upload it. And we will let the user choose the image from device. So our first task here is to let the user choose the image to upload.

Choosing an Image from Androids Gallery

  • First define a var inside your MainActivity.kt.  This var will keep the uri of the selected image file.

  • Now we will create two different function inside our MainActivity.kt. One is to choose the image that we will use now and other to upload the image.
  • We will also attach the click listeners to our ImageView and Button to call the functions as you can see in the below code.

  • The above code snippet you need to put inside your onCreate() function.
  • Inside MainActivity.kt we will define a constant that we will use for getting the selected image.

  • Now we will define the function openImageChooser() that will open the image picker, and we will also override the function onActivityResult() to get the selected image.

  • As you can see inside the function onActivityResult() we are storing the uri of the image to the var that we defined at the beginning. We are also displaying the image selected in our ImageView.

Here we have the tricky part, we have the Uri of the image, but to upload the image we need the real path of it. If you have seen my last tutorial about Uploading Image with Retrofit, then here we have used a function that provides the real path from Uri. But this doesn’t work anymore in Android 10. 

Nowadays, android recommends us to use the app directory for file storage. Every app has its own app-specific storage directory for file storage that is not accessible to other apps, and all files stored here are removed when we uninstall the application. And the good thing is too access this area you don’t need any permission. 

So what we need to do is, we need to select the file from the gallery and make a copy of it inside the app-specific storage directory. 

But before doing the above mentioned thing we will setup the Retrofit.

Setting Up Retrofit for File Upload

If you have used Retrofit earlier, you know what we need to do. First we will create an interface to define the API Calls.

  • Create a file named MyAPI.kt and write the following code in it.

  • In the above code you can see we didn’t use localhost in the Base URL but we used IP Address, now what is the IP Address in your system you need to find it out. Check this post to know the details about it.
  • Now you also need to create the following data class for parsing the API Response.

Creating Some Extension Functions

Extension function is a great feature that you get with Kotlin. We need to create two extension functions in this project, one is for getting file name from Uri and another one is for displaying snackbar (Toast looks very boring now a days).

  • Create a file named Utils.kt and write the following code.

  • Now let’s make the very important part of this project, that is a custom RequestBody.

If we want to get the upload progress, we need to create a custom RequestBody that will contain the file and the other information that we need to send with the API.

Creating Custom RequestBody

  • Create a class named UploadRequestBody and write the following code in it.

  • Now we just need to complete the function uploadImage() inside our MainActivity.kt and we are done.

  • After finishing the above function, you can try running your application to see the image is getting uploaded or not.

Android Upload File to Server with Progress Source Code

In case you want to get my source code, you can get it by being Simplified Coding’s Subscriber on YouTube.


git hub repository
Get the Source Code
So that is all for this Android Upload File to Server with Progress Tutorial friends. In case you have any problem or confusion, you can leave your comments below. And if you found this post helpful then please help me back by SHARING it with your friends. Thank You 🙂