How To Upload Images 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 unproblematic dan powerful. Retrofit merupakan library http asking 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 ii 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.

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 Coffee 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']['proper 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:two.3.0'

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

implementation 'pub.devrel:easypermissions:2.0.ane'

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="centre"

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="simulated"

android:clickable="true"

android:background="@colour/colorPrimary"

android:textColor="#FFF"/>

</LinearLayout>

Interface Retrofit

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

Isi dengan script berikut :

@Multipart

@Mail service("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 :

Deklarasi Variabel
Panggil Easy Permission
Intent ke Galery
Ambil Filepath
Panggil OnActivityResult
Upload Gambar ke Server

Deklarasi Variabel

Button btn_image;

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

public static final int REQUEST_IMAGE = 100;

Uri uri;

Kita mendeklarasikan Push button, BASE_URL dari webserver kita, Asking 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 course UploadActivity extends AppCompatActivity implements EasyPermissions.PermissionCallbacks {

//Lawmaking

}

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);

interruption;

}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, Activeness activeness) {

Cursor cursor = activity.getContentResolver().query(contentURI, zilch, null, naught, 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 && 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 trunk

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

Retrofit retrofit = new Retrofit.Builder()

.baseUrl(BASE_URL)

.addConverterFactory(GsonConverterFactory.create())

.build();

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

Phone call<RequestBody> uploadGambar = service.uploadGambar(body);

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

@Override

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

}

@Override

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

}

});

}

Script lengkap MainActivity.java akan menjadi seperti ini :

parcel 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.back up.v7.app.AppCompatActivity;

import android.os.Package;

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.Telephone call;

import retrofit2.Callback;

import retrofit2.Response;

import retrofit2.Retrofit;

import retrofit2.converter.gson.GsonConverterFactory;

public grade UploadActivity extends AppCompatActivity implements EasyPermissions.PermissionCallbacks {

Button btn_image;

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

public static last 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 = action.getContentResolver().query(contentURI, zero, nada, null, zero);

if (cursor == zero) {

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("epitome/*"),file);

MultipartBody.Part body = MultipartBody.Role.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(Phone 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 && 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<Cord> perms) {

if(requestCode == REQUEST_IMAGE){

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

}

}

@Override

public void onPermissionsDenied(int requestCode, @NonNull List<Cord> 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.

Source: https://www.funtechsy.com/2020/07/cara-upload-gambar-android-retrofit.html

Posted by: robertsonwinfort.blogspot.com