Skip to main content

How to upload the selected image to a server using ImagePicker in Kotlin Android

How to upload the selected image to a server using ImagePicker in Kotlin Android.

Here's a step-by-step tutorial on how to upload a selected image to a server using ImagePicker in Kotlin Android:

Step 1: Set up your project​

  • Create a new Android project in Kotlin.
  • Add the necessary permissions to your AndroidManifest.xml file:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  • Add the following dependencies to your build.gradle file:
implementation 'com.github.dhaval2404:imagepicker:1.7'
implementation 'com.squareup.okhttp3:okhttp:4.9.1'

Step 2: Add ImagePicker to your project​

  • In your project's MainActivity, add the following import statements:
import com.github.dhaval2404.imagepicker.ImagePicker
import com.github.dhaval2404.imagepicker.constant.ImageProvider
import com.github.dhaval2404.imagepicker.listener.ImageListener
  • Create a function to handle the image selection and upload:
private fun selectAndUploadImage() {
    ImagePicker.with(this)
        .crop()
        .compress(1024) // You can set the desired compression size in kilobytes
        .maxResultSize(1080, 1080) // You can set the desired maximum image dimensions
        .start(object : ImageListener {
            override fun onImageSelected(imageFile: File?) {
                // Image selected, now upload it to the server
                if (imageFile != null) {
                    uploadImageToServer(imageFile)
                }
            }

            override fun onCanceled() {
                // Image selection canceled by the user
            }
        })
}

Step 3: Implement image upload function​

  • Add the following import statements to your MainActivity:
import okhttp3.*
import java.io.File
import java.io.IOException
  • Create a function to handle the image upload:
private fun uploadImageToServer(imageFile: File) {
    val client = OkHttpClient()

    val requestBody = MultipartBody.Builder()
        .setType(MultipartBody.FORM)
        .addFormDataPart("image", imageFile.name, RequestBody.create(MediaType.parse("image/*"), imageFile))
        .build()

    val request = Request.Builder()
        .url("http://your-server-url.com/upload")
        .post(requestBody)
        .build()

    client.newCall(request).enqueue(object : Callback {
        override fun onFailure(call: Call, e: IOException) {
            // Handle upload failure
        }

        override fun onResponse(call: Call, response: Response) {
            // Handle upload success
        }
    })
}

Step 4: Call the image selection function​

  • In your MainActivity's onCreate() method, call the selectAndUploadImage() function when a button or any other UI element is clicked:
button.setOnClickListener {
    selectAndUploadImage()
}

That's it! You have now implemented image selection and upload functionality using ImagePicker in Kotlin Android. When the user selects an image, it will be uploaded to the server using OkHttp library. Make sure to replace the "http://your-server-url.com/upload" with your actual server URL.

Note: Don't forget to handle permissions and provide appropriate error handling in your actual application.