A step-by-step tutorial

Yong Cui

Follow

Dec 14, 2019 · 3 min read

As a cross-platform, statically typed, general-purpose programming language, Kotlin has become more and more popular among Android developers. It has full interoperability with Java code and supports type inference to make its syntax more concise without sacrificing readability. Importantly, Kotlin is developed and maintained by the Kotlin Foundation, which is sponsored by Google — a tech company that has earned credibility from most, if not all, programmers.

If you pick Kotlin for your Android app development, a common task you may find yourself dealing with is having to upload an image, such as a user profile thumbnail, to your server.

I’m going to show you an easy way to get this job done using Volley, an HTTP library that can implement networking requests quickly for Android apps.

Step 1: Setup

To use the Volley library in your app, you need to add the Volley dependency to your app’s build.gradle file:

dependencies {
    ...
    implementation 'com.android.volley:volley:1.1.1'
}

Certainly, your app needs to have permission to use the internet by adding the permissions in the AndroidManifest.xml file.

<uses-permission android:name="android.permission.INTERNET"/>

For the purpose of this tutorial, I simply created a button called imageButton to launch the gallery, an image view called imageView to preview the photo, and another button called sendButton to upload the image to the server. The layout file is shown:

Step 2: Choose and Process the Image

The use of an Intent with a type of image/* will allow you to open the picture gallery. With this intent, start the activity using the function of startActivityForResult, which will allow access to the image selected in the gallery.

Once the image is selected, you can access it by implementing the function of onActivityResult. Specifically, we have to access the Uri of the image, with which, we show the image in the imageView and create a ByteArray for later data uploading.

Step 3. Create a Volley Request Subclass That Supports Multipart Uploading

To upload the image data to the server, we need to use the multipart form request. To do that, we first create a subclass that inherits the Volley’s Request class. Here is the code for that:

Let me highlight some key functions. First, you need to specify the body content type to be multipart/form-data and the boundary used, the latter of which is necessary for the server to correctly parse your data. Second, the params and data will all need to be written to a ByteArray, which can be sent as the body for the POST request.

Step 4. Upload Your Image

Now you have the image data and the multipart Request class, you’re ready to upload the image. Certainly, your server needs to have the correct API to respond this HTTP POST request. For the purpose of this tutorial, I will just use a free HTTP POST test service that I found online (https://ptsv2.com/). Although it’s free, please use it parsimoniously and just for testing purposes.

As part of the above MainActivity.kt file, one important thing to note is that you need to override the getByteData function of the request class. Specifically, you need to provide the request with your image data, and the class will have additional functions to convert the image data to the needed ByteArray format for data uploading.

In the “toilet” from the test website (https://ptsv2.com/), you should see your data dump. You just uploaded your image using Volley!

Conclusions

The Volley library is a robust library that makes the HTTP requests much easier to implement. You can subclass the Request class to meet your other needs, including some standard ones (e.g., json requests, string requests). The example given here can be easily adapted to upload files other than images.

Happy coding with Kotlin!