Cara Upload Gambar dari Android Menggunakan Retrofit

Halo semua, setelah kita belajar cara menggunakan retrofit untuk recycler view di artikel sebelumnya. Pada artikel kali ini kita akan belajar bagaimana cara upload gambar dari android menggunakan retrofit. Retrofit merupakan sebuah library android yang digunakan untuk menangani HTTP request secara simple dan powerful. Retrofit merupakan library http request paling populer yang ada di android.

Dalam membangun sebuah website, fitur upload file / gambar ke server merupakan fitur pokok yang seharusnya ada di sebuah website. Sama halnya dengan aplikasi android, fitur upload file sudah seharusnya ada dalam sebuah aplikasi android yang digunakan pada tahap produksi.

Baca Juga artikel sebelumnya : Tutorial Integrasi Recyclerview dengan retrofit 2 di Android

Dalam mengirim sebuah file (musik,gambar,dll) HTTP menggunakan type encoding multipart untuk ‘membungkus’ file yang akan diupload ke server. Hal ini berlaku pula dengan retrofit, yang mana memang retrofit merupakan library http request.

Lebih lengkap tentang multipart :

• Example of Multipart
• What is multipart http request ?

Skenario

Skenario tutorial kali ini, kita akan mengambil gambar dari gallery. Kemudian langsung upload ke server. Jadi, hanya ada satu tombol untuk menangani intent ke gallery.

Untuk pengembangannya, kalian bisa membuat imageview untuk menampilkan gambar yang dipilih sebelum dikirim / diupload ke server.

API Upload Gambar ke Server

Sebelum ke Layouting dan Java nya, pertama kita harus siapkan api server untuk meng upload gambar dari android ke server.

Paste lalu simpan script berikut ini di direktori web server kalian :

<?php

 

$image = $_FILES['file']['tmp_name'];

$imagename = $_FILES['file']['name'];

 

$file_path = $_SERVER['DOCUMENT_ROOT'] . '/api-kompikaleng';

 

$data = "";

 

if (!file_exists($file_path)) {

    mkdir($file_path, 0777, true);

}

 

if(!$image){

        $data['message'] = "Gambar tidak ditemukan";

}

else{

    if(move_uploaded_file($image, $file_path.'/'.$imagename)){

        $data['message'] = "Sukses Upload Gambar";

    }

 }

print_r(json_encode($data));

 

?>

$file_path merupakan path tempat untuk menyimpan gambar yang akan diupload nantinya. Jadi, sesuaikan pathnya dengan kalian ya. 

Dependencies Retrofit

Kemudian, kita siapkan dependency – dependency yang akan kita gunakan nantinya. Yang jelas kita akan menggunakan retrofit dan Gson untuk mengconvert hasil json ke java object.

Selain itu, kita juga menggunakan EasyPermissions library untuk mengecek dan melakukan request permission mengakses Storage.

implementation 'com.squareup.retrofit2:retrofit:2.3.0'

implementation 'com.squareup.retrofit2:converter-gson:2.3.0'

implementation 'pub.devrel:easypermissions:2.0.1'

Salin dan simpan di build.gradle .

Android Manifest

Di aplikasi android kali ini, kita memerlukan permission internet dan juga permission untuk mengakses storage handphone.

Salin dan tempelkan di manifest ya : 

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

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

Layout

Kemudian kita akan membuat layoutnya. Seperti yang saya jelaskan di skenario, disini kita hanya akan membuat satu button untuk mengambil di galery. Setelah gambar dipilih, kemudian langsung execute retrofit untuk upload gambar ke server.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".UploadActivity"

    android:gravity="center"

    android:orientation="vertical">

    <android.support.v7.widget.AppCompatButton

        android:id="@+id/btn_image"

        android:layout_width="200dp"

        android:layout_height="50dp"

        android:text="Ambil Gambar"

        android:textAllCaps="false"

        android:clickable="true"

        android:background="@color/colorPrimary"

        android:textColor="#FFF"/>

</LinearLayout>

 

Interface Retrofit

Buatlah sebuah Interface yang bertujuan untuk mendefinisikan HTTP request yang akan kita lakukan dengan retrofit nantinya.

Isi dengan script berikut :

@Multipart

@POST("uploadGambar.php")

Call<RequestBody> uploadGambar(@Part MultipartBody.Part body);

 Keterangan :

Annotasi @Multipart, berfungsi untuk mendefinisikan type encode dari http request kita. Yang mana kita menggunakan tipe enkrip multipart/ form-data untuk mengirim file ke server.

Annotasi @POST(“”), berfungsi untuk mendefinisikan tipe http request kita. Diisi dengan endpoint dari API kita yang sudah kita buat tadi.

MainActivity.java

Sampai di main activity, kita akan melakukan beberapa langkah yang sudah saya bagi seperti berikut :

1. Deklarasi Variabel
2. Panggil Easy Permission
3. Intent ke Galery
4. Ambil Filepath
5. Panggil OnActivityResult
6. Upload Gambar ke Server

Deklarasi Variabel

Button btn_image;

 

public final static String BASE_URL = "http://192.168.168.11/api-kompikaleng/";

 

public static final int REQUEST_IMAGE = 100;

Uri uri;

Kita mendeklarasikan Button, BASE_URL dari webserver kita, Request code yang akan kita gunakan untuk intent, dan juga membuat sebuah komponen URI.

 

Panggil Easy Permission

Sebelumnya kita telah memanggil dependency easy permission di build.gradle, maka dari itu kita perlu memanggilnya lewat implements.

public class UploadActivity extends AppCompatActivity implements EasyPermissions.PermissionCallbacks {

 

//Code

 

}

Panggil easy permission dengan menambahkan implements EasyPermssions.PermissionCallbacks.

Setelah itu, kita perlu panggil implement methodnya dengan cara CTRL + I.

Ambil onPermissionGranted dan onPermissionDenied.

Intent ke Galery

Kemudian kita akan intent ke galery lewat button onclick listener. 

btn_image = findViewById(R.id.btn_image);

 

        btn_image.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

 

                if(EasyPermissions.hasPermissions(this, Manifest.permission.READ_EXTERNAL_STORAGE)) {

                    Intent openGalleryIntent = new Intent(Intent.ACTION_PICK);

                    openGalleryIntent.setType("image/*");

                    startActivityForResult(openGalleryIntent, REQUEST_IMAGE);

                    break;

                }else{

                    EasyPermissions.requestPermissions(this,"Izinkan Aplikasi Mengakses Storage?",REQUEST_IMAGE,Manifest.permission.READ_EXTERNAL_STORAGE);

                }

 

            }

        });

Ambil Filepath

Tambahkan fungsi di bawah untuk mengambil filepath dari URI.

private String getRealPathFromURIPath(Uri contentURI, Activity activity) {

        Cursor cursor = activity.getContentResolver().query(contentURI, null, null, null, null);

        if (cursor == null) {

            return contentURI.getPath();

        } else {

            cursor.moveToFirst();

            int idx = cursor.getColumnIndex(MediaStore.Images.ImageColumns.DATA);

            return cursor.getString(idx);

        }

    }

Panggil OnActivityResult

Karena kita melakukan intent ke galery, maka kita butuh onActivityResult untuk menangkap gambar yang dipilih.

CTRL + O, kemudian pilih onActivityResult. 

 

Setelah itu, isi onactivityresult dengan script berikut untuk menyimpannya ke dalam URI lalu panggil fungsi upload file :

if(requestCode == REQUEST_IMAGE &amp;&amp; resultCode == RESULT_OK){

            uri = data.getData();

            uploadFile(uri);

        }

Upload Gambar dari Android Menggunakan Retrofit

Buatlah sebuah fungsi untuk menginisiasi retrofit untuk upload gambar. 

void uploadFile(Uri contentURI){

 

        String filePath = getRealPathFromURIPath(contentURI,UploadActivity.this);

        File file = new File(filePath);

        Log.d("File",""+file.getName());

 

        RequestBody mFile = RequestBody.create(MediaType.parse("image/*"),file); //membungkus file ke dalam request body

        MultipartBody.Part body = MultipartBody.Part.createFormData("file",file.getName(),mFile); // membuat formdata multipart berisi request body

 

        Retrofit retrofit = new Retrofit.Builder()

                .baseUrl(BASE_URL)

                .addConverterFactory(GsonConverterFactory.create())

                .build();

        ApiService service = retrofit.create(ApiService.class);

        Call<RequestBody> uploadGambar = service.uploadGambar(body);

        uploadGambar.enqueue(new Callback<RequestBody>() {

            @Override

            public void onResponse(Call<RequestBody> call, Response<RequestBody> response) {

 

            }

 

            @Override

            public void onFailure(Call<RequestBody> call, Throwable t) {

 

            }

        });

    }

Script lengkap MainActivity.java akan menjadi seperti ini :

package com.example.pkl.TodoListAlf;

 

import android.Manifest;

import android.app.Activity;

import android.content.Intent;

import android.database.Cursor;

import android.net.Uri;

import android.provider.MediaStore;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.ProgressBar;

import android.widget.TextView;

import android.widget.Toast;

 

import com.example.pkl.TodoListAlf.Interface.ApiService;

import com.example.pkl.TodoListAlf.Model.UploadResult;

 

import java.io.File;

import java.util.List;

 

import okhttp3.MediaType;

import okhttp3.MultipartBody;

import okhttp3.RequestBody;

import pub.devrel.easypermissions.EasyPermissions;

import retrofit2.Call;

import retrofit2.Callback;

import retrofit2.Response;

import retrofit2.Retrofit;

import retrofit2.converter.gson.GsonConverterFactory;

 

public class UploadActivity extends AppCompatActivity implements EasyPermissions.PermissionCallbacks {

 

    Button btn_image;

    public final static String BASE_URL = "http://192.168.168.11/api-kompikaleng/";

    public static final int REQUEST_IMAGE = 100;

    Uri uri;

 

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_upload);

 

        btn_image = findViewById(R.id.btn_image);

 

        btn_image.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                execute(REQUEST_IMAGE);

            }

        });

    }

 

    void execute(int requestCode){

        switch (requestCode){

            case REQUEST_IMAGE:

                if(EasyPermissions.hasPermissions(this, Manifest.permission.READ_EXTERNAL_STORAGE)) {

                    Intent openGalleryIntent = new Intent(Intent.ACTION_PICK);

                    openGalleryIntent.setType("image/*");

                    startActivityForResult(openGalleryIntent, REQUEST_IMAGE);

                    break;

                }else{

                    EasyPermissions.requestPermissions(this,"Izinkan Aplikasi Mengakses Storage?",REQUEST_IMAGE,Manifest.permission.READ_EXTERNAL_STORAGE);

                }

        }

    }

 

    private String getRealPathFromURIPath(Uri contentURI, Activity activity) {

        Cursor cursor = activity.getContentResolver().query(contentURI, null, null, null, null);

        if (cursor == null) {

            return contentURI.getPath();

        } else {

            cursor.moveToFirst();

            int idx = cursor.getColumnIndex(MediaStore.Images.ImageColumns.DATA);

            return cursor.getString(idx);

        }

    }

 

    void uploadFile(Uri contentURI){

 

        String filePath = getRealPathFromURIPath(contentURI,UploadActivity.this);

        File file = new File(filePath);

        Log.d("File",""+file.getName());

 

        RequestBody mFile = RequestBody.create(MediaType.parse("image/*"),file);

        MultipartBody.Part body = MultipartBody.Part.createFormData("file",file.getName(),mFile);

 

        Retrofit retrofit = new Retrofit.Builder()

                .baseUrl(BASE_URL)

                .addConverterFactory(GsonConverterFactory.create())

                .build();

        ApiService service = retrofit.create(ApiService.class);

        Call<RequestBody> uploadGambar = service.uploadGambar(body);

        uploadGambar.enqueue(new Callback<RequestBody>() {

            @Override

            public void onResponse(Call<RequestBody> call, Response<RequestBody> response) {

 

            }

 

            @Override

            public void onFailure(Call<RequestBody> call, Throwable t) {

 

            }

        });

    }

 

    @Override

    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {

        super.onActivityResult(requestCode, resultCode, data);

        if(requestCode == REQUEST_IMAGE &amp;&amp; resultCode == RESULT_OK){

            uri = data.getData();

            uploadFile(uri);

        }

    }

 

    @Override

    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {

        super.onRequestPermissionsResult(requestCode, permissions, grantResults);

    }

 

    @Override

    public void onPermissionsGranted(int requestCode, @NonNull List<String> perms) {

        if(requestCode == REQUEST_IMAGE){

            Toast.makeText(this, "Permission granted", Toast.LENGTH_SHORT).show();

        }

    }

 

    @Override

    public void onPermissionsDenied(int requestCode, @NonNull List<String> perms) {

        if(requestCode == REQUEST_IMAGE){

            Toast.makeText(this, "Permission denied", Toast.LENGTH_SHORT).show();

        }

    }

}

Selesai, silahkan build dan run!.

Kemudian lakukan trial dengan mengambil gambar dari galery dan cek apakah gambar terupload ke filepath yang sudah ditentukan di dalam API Upload tadinya.

Gimana? apa punya kalian berhasil? kalau berhasil jangan lupa tinggalkan komentar ya :).

Kalau kalian merasa artikel ini bermanfaat, jangan lupa tinggalkan komentar ya 🙂

Terima kasih. 

 

Share This :