Learn about Android Retrofit Multipart Upload Image to server (PHP – MySQL) example.
This tutorial will guide you to send multipart image retrofit from android device.
We will use multipartbody.part retrofit class to send image with multipart in this example.
When we upload image using retrofit 2 to remote server, we will get JSON response in string format.
After uploading the image, we will fetch it from server also. We will get the URL of uploaded image in the JSON response.
If you want to upload image in Base64 String format using retrofit then read : Android Upload Image in Base64 Retrofit Example
See the below video to demonstrate multipart retrofit.
PHP Scripts
Create a new file named uploadfile.php and add below code
<?php
if($_SERVER['REQUEST_METHOD']=='POST'){
// echo $_SERVER["DOCUMENT_ROOT"]; // /home1/demonuts/public_html
//including the database connection file
include_once("config.php");
//$_FILES['image']['name'] give original name from parameter where 'image' == parametername eg. city.jpg
//$_FILES['image']['tmp_name'] temporary system generated name
$originalImgName= $_FILES['filename']['name'];
$tempName= $_FILES['filename']['tmp_name'];
$folder="uploadedFiles/";
$url = "https://www.demonuts.com/Demonuts/JsonTest/Tennis/uploadedFiles/".$originalImgName; //update path as per your directory structure
if(move_uploaded_file($tempName,$folder.$originalImgName)){
$query = "INSERT INTO upload_image_video (pathToFile) VALUES ('$url')";
if(mysqli_query($con,$query)){
$query= "SELECT * FROM upload_image_video WHERE pathToFile='$url'";
$result= mysqli_query($con, $query);
$emparray = array();
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_assoc($result)) {
$emparray[] = $row;
}
echo json_encode(array( "status" => "true","message" => "Successfully file added!" , "data" => $emparray) );
}else{
echo json_encode(array( "status" => "false","message" => "Failed!") );
}
}else{
echo json_encode(array( "status" => "false","message" => "Failed!") );
}
//echo "moved to ".$url;
}else{
echo json_encode(array( "status" => "false","message" => "Failed!") );
}
}
?>
Another file is config.php Here is it’s source
<?php
$host="localhost";
$user="your username";
$password="your password";
$db = "your db name";
$con = mysqli_connect($host,$user,$password,$db);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}else{ //echo "Connect";
}
?>
Step 1. Dependency and some permissions
First of all, make a new project in android studio.
Now in your build.gradle(Module :app) file, copy the below four lines.
implementation 'com.karumi:dexter:5.0.0'
implementation 'com.squareup.retrofit2:retrofit:2.5.0'
implementation 'com.squareup.retrofit2:converter-scalars:2.5.0'
implementation 'com.squareup.picasso:picasso:2.71828'
First line is integrating the dexter library in our project. This line will help us to ask the runtime permissions in easy manner.
Second line will enable us to use classes of the retrofit library.
Scalar library will give us right to convert the JSON response in to the string format.
Last line is about Picasso library. Using Picasso, we can fetch the image from the URL with just one line of code.
Now in your AndroidManifest.xml file, add the below three lines
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
These lines are adding permissions in our app. First line will give us INTERNET permission.
Second will allow us to read external storage while third one will help us to write external storage.
Step 2. Interface for Multipart
Now it is time to make an interface. Create a new class and give it a name like MultiInterface.java
Write down the following source code in MultiInterface.java
import okhttp3.MultipartBody;
import okhttp3.RequestBody;
import retrofit2.Call;
import retrofit2.http.Field;
import retrofit2.http.FormUrlEncoded;
import retrofit2.http.Multipart;
import retrofit2.http.POST;
import retrofit2.http.Part;
public interface MultiInterface {
String IMAGEURL = "https://demonuts.com/Demonuts/JsonTest/Tennis/";
@Multipart
@POST("uploadfile.php")
Call<String> uploadImage(
@Part MultipartBody.Part file, @Part("filename") RequestBody name
);
}
First line is a string variable which holds the URL address of the web service.
@Multipart annotation is specifying to retrofit to use multipart.
@POST(“uploadfile.php”) is giving the file name of the web API.
uploadImage() method has two parameters. MultipartBody.Part will contain the image.
Step 3. Last Writings of code
In your activity_main.xml file, copy down the following code block
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn"
android:background="@color/colorAccent"
android:textColor="#fff"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Select Image and upload to server" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Below image is uploaded to server Using Multipart Retrofit"
android:layout_marginTop="5dp"
android:textSize="23sp"
android:gravity="center"
android:textColor="#000"/>
<ImageView
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:scaleType="fitXY"
android:src="@mipmap/ic_launcher"
android:id="@+id/iv"/>
</LinearLayout>
Three UI widgets are there in the above XML file.
First one is Button, second is text view and last is Image view.
When the user clicks the button, system will led you to selector screen.
Text view is saying the purpose of this example.
Image view will hold the uploaded image.
Now following code structure is made for MainActivity.java file.
import android.Manifest;
import android.content.Intent;
import android.graphics.Bitmap;
import android.media.MediaScannerConnection;
import android.net.Uri;
import android.os.Environment;
import android.provider.MediaStore;
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.ImageView;
import android.widget.Toast;
import com.karumi.dexter.Dexter;
import com.karumi.dexter.MultiplePermissionsReport;
import com.karumi.dexter.PermissionToken;
import com.karumi.dexter.listener.DexterError;
import com.karumi.dexter.listener.PermissionRequest;
import com.karumi.dexter.listener.PermissionRequestErrorListener;
import com.karumi.dexter.listener.multi.MultiplePermissionsListener;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.HashMap;
import java.util.List;
import com.squareup.picasso.Picasso;
import okhttp3.MediaType;
import okhttp3.MultipartBody;
import okhttp3.RequestBody;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.scalars.ScalarsConverterFactory;
public class MainActivity extends AppCompatActivity {
private Button btn;
private ImageView imageView;
private final int GALLERY = 1;
private static final String IMAGE_DIRECTORY = "/demonuts_upload_gallery";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
requestMultiplePermissions();
btn = findViewById(R.id.btn);
imageView = (ImageView) findViewById(R.id.iv);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent galleryIntent = new Intent(Intent.ACTION_PICK,
android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(galleryIntent, GALLERY);
}
});
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == this.RESULT_CANCELED) {
return;
}
if (requestCode == GALLERY) {
if (data != null) {
Uri contentURI = data.getData();
try {
Bitmap bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), contentURI);
// imageView.setImageBitmap(bitmap);
String path = saveImage(bitmap);
uploadImage(path);
} catch (IOException e) {
e.printStackTrace();
Toast.makeText(MainActivity.this, "Failed!", Toast.LENGTH_SHORT).show();
}
}
}
}
private void uploadImage(String path){
String imgname = String.valueOf(Calendar.getInstance().getTimeInMillis());
Retrofit retrofit = new Retrofit.Builder()
.baseUrl(MultiInterface.IMAGEURL)
.addConverterFactory(ScalarsConverterFactory.create())
.build();
//Create a file object using file path
File file = new File(path);
// Parsing any Media type file
RequestBody requestBody = RequestBody.create(MediaType.parse("*/*"), file);
MultipartBody.Part fileToUpload = MultipartBody.Part.createFormData("filename", file.getName(), requestBody);
RequestBody filename = RequestBody.create(MediaType.parse("text/plain"), imgname);
MultiInterface getResponse = retrofit.create(MultiInterface.class);
Call<String> call = getResponse.uploadImage(fileToUpload, filename);
Log.d("assss","asss");
call.enqueue(new Callback<String>() {
@Override
public void onResponse(Call<String> call, Response<String> response) {
Log.d("mullllll", response.body().toString());
try {
JSONObject jsonObject = new JSONObject(response.body().toString());
Toast.makeText(getApplicationContext(), jsonObject.getString("message"), Toast.LENGTH_SHORT).show();
jsonObject.toString().replace("\\\\","");
if (jsonObject.getString("status").equals("true")) {
JSONArray dataArray = jsonObject.getJSONArray("data");
String url = "";
for (int i = 0; i < dataArray.length(); i++) {
JSONObject dataobj = dataArray.getJSONObject(i);
url = dataobj.optString("pathToFile");
}
Picasso.get().load(url).into(imageView);
}
} catch (JSONException e) {
e.printStackTrace();
}
}
@Override
public void onFailure(Call call, Throwable t) {
Log.d("gttt", call.toString());
}
});
}
private void requestMultiplePermissions(){
Dexter.withActivity(this)
.withPermissions(
Manifest.permission.WRITE_EXTERNAL_STORAGE,
Manifest.permission.READ_EXTERNAL_STORAGE)
.withListener(new MultiplePermissionsListener() {
@Override
public void onPermissionsChecked(MultiplePermissionsReport report) {
// check if all permissions are granted
if (report.areAllPermissionsGranted()) {
Toast.makeText(getApplicationContext(), "All permissions are granted by user!", Toast.LENGTH_SHORT).show();
}
// check for permanent denial of any permission
if (report.isAnyPermissionPermanentlyDenied()) {
// show alert dialog navigating to Settings
}
}
@Override
public void onPermissionRationaleShouldBeShown(List<PermissionRequest> permissions, PermissionToken token) {
token.continuePermissionRequest();
}
}).
withErrorListener(new PermissionRequestErrorListener() {
@Override
public void onError(DexterError error) {
Toast.makeText(getApplicationContext(), "Some Error! ", Toast.LENGTH_SHORT).show();
}
})
.onSameThread()
.check();
}
public String saveImage(Bitmap myBitmap) {
ByteArrayOutputStream bytes = new ByteArrayOutputStream();
myBitmap.compress(Bitmap.CompressFormat.JPEG, 90, bytes);
File wallpaperDirectory = new File(
Environment.getExternalStorageDirectory() + IMAGE_DIRECTORY);
// have the object build the directory structure, if needed.
if (!wallpaperDirectory.exists()) {
wallpaperDirectory.mkdirs();
}
try {
File f = new File(wallpaperDirectory, Calendar.getInstance()
.getTimeInMillis() + ".jpg");
f.createNewFile();
FileOutputStream fo = new FileOutputStream(f);
fo.write(bytes.toByteArray());
MediaScannerConnection.scanFile(this,
new String[]{f.getPath()},
new String[]{"image/jpeg"}, null);
fo.close();
Log.d("TAG", "File Saved::--->" + f.getAbsolutePath());
return f.getAbsolutePath();
} catch (IOException e1) {
e1.printStackTrace();
}
return "";
}
}
Digging above code
Main activity holds the main logic of the example. So let us see it with some more information.
See the below lines
private Button btn;
private ImageView imageView;
private final int GALLERY = 1;
private static final String IMAGE_DIRECTORY = "/demonuts_upload_gallery";
First two lines are making the objects of Button and ImageView classes respectively.
Third line is defining one integer constant.
Last line is a string constant which is a directory where we will save the image.
Now read the following code snippet
requestMultiplePermissions();
btn = findViewById(R.id.btn);
imageView = (ImageView) findViewById(R.id.iv);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent galleryIntent = new Intent(Intent.ACTION_PICK,
android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
startActivityForResult(galleryIntent, GALLERY);
}
});
Inside onCreate() method, compiler will first execute the requestMultiplePermissions() method.
requestMultiplePermissions() method has the below lines
private void requestMultiplePermissions(){
Dexter.withActivity(this)
.withPermissions(
Manifest.permission.WRITE_EXTERNAL_STORAGE,
Manifest.permission.READ_EXTERNAL_STORAGE)
.withListener(new MultiplePermissionsListener() {
@Override
public void onPermissionsChecked(MultiplePermissionsReport report) {
// check if all permissions are granted
if (report.areAllPermissionsGranted()) {
Toast.makeText(getApplicationContext(), "All permissions are granted by user!", Toast.LENGTH_SHORT).show();
}
// check for permanent denial of any permission
if (report.isAnyPermissionPermanentlyDenied()) {
// show alert dialog navigating to Settings
}
}
@Override
public void onPermissionRationaleShouldBeShown(List<PermissionRequest> permissions, PermissionToken token) {
token.continuePermissionRequest();
}
}).
withErrorListener(new PermissionRequestErrorListener() {
@Override
public void onError(DexterError error) {
Toast.makeText(getApplicationContext(), "Some Error! ", Toast.LENGTH_SHORT).show();
}
})
.onSameThread()
.check();
}
This method is asking runtime permissions to the user. Typically, we need to ask for read and write external storage here.
After this method, compiler will again move to the onCreate() method.
Then it will set the button click logic. When the user clicks the button, it will create one intent. This intent will show images of the android device to the user.
User will have to select one image from here which will be uploaded to the server.
Compiler will call onActivityResult() method when the user selects the image.
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (resultCode == this.RESULT_CANCELED) {
return;
}
if (requestCode == GALLERY) {
if (data != null) {
Uri contentURI = data.getData();
try {
Bitmap bitmap = MediaStore.Images.Media.getBitmap(this.getContentResolver(), contentURI);
// imageView.setImageBitmap(bitmap);
String path = saveImage(bitmap);
uploadImage(path);
} catch (IOException e) {
e.printStackTrace();
Toast.makeText(MainActivity.this, "Failed!", Toast.LENGTH_SHORT).show();
}
}
}
}
Here, compiler will fetch the Uri of the image. Then it will create a bitmap of the image from this Uri.
Compiler will use saveImage() method along with bitmap to save the image.
After saving the image, compiler will fetch it’s path and will pass this path to the uploadImage() method.
Following is the handy source code of uploadImage() method
private void uploadImage(String path){
String imgname = String.valueOf(Calendar.getInstance().getTimeInMillis());
Retrofit retrofit = new Retrofit.Builder()
.baseUrl(MultiInterface.IMAGEURL)
.addConverterFactory(ScalarsConverterFactory.create())
.build();
//Create a file object using file path
File file = new File(path);
// Parsing any Media type file
RequestBody requestBody = RequestBody.create(MediaType.parse("*/*"), file);
MultipartBody.Part fileToUpload = MultipartBody.Part.createFormData("filename", file.getName(), requestBody);
RequestBody filename = RequestBody.create(MediaType.parse("text/plain"), imgname);
MultiInterface getResponse = retrofit.create(MultiInterface.class);
Call<String> call = getResponse.uploadImage(fileToUpload, filename);
Log.d("assss","asss");
call.enqueue(new Callback<String>() {
@Override
public void onResponse(Call<String> call, Response<String> response) {
Log.d("mullllll", response.body().toString());
try {
JSONObject jsonObject = new JSONObject(response.body().toString());
Toast.makeText(getApplicationContext(), jsonObject.getString("message"), Toast.LENGTH_SHORT).show();
jsonObject.toString().replace("\\\\","");
if (jsonObject.getString("status").equals("true")) {
JSONArray dataArray = jsonObject.getJSONArray("data");
String url = "";
for (int i = 0; i < dataArray.length(); i++) {
JSONObject dataobj = dataArray.getJSONObject(i);
url = dataobj.optString("pathToFile");
}
Picasso.get().load(url).into(imageView);
}
} catch (JSONException e) {
e.printStackTrace();
}
}
@Override
public void onFailure(Call call, Throwable t) {
Log.d("gttt", call.toString());
}
});
}
First line in above method is fetching current time in milliseconds. Compiler store it in string variable. We will use this value as a name of the image.
Then system will create the object of the Retrofit class. Here, .baseUrl(MultiInterface.IMAGEURL) will give the reference to the URL of the web service.
After this compiler will create file using path captured from the parameter.
Then an objects of RequestBody and Multipartbody.Part classes will be created.
Object of Call<Sring> is the call variable. getResponse.uploadImage() method will initiate the http request and call will use .enqueue() to finally fire call to the web service.
When the compiler get the JSON response from server, it will execute onResponse() method.
It will parse this JSON response in string format and will get the URL of the uploaded image using below line
url = dataobj.optString("pathToFile");
Finally, below code line will fetch the uploaded image from URL using Picasso library.
Picasso.get().load(url).into(imageView);
Android Course
Android course from beginner to paid professional.