Retrofit Uploading multiple images to a single key

Question

I am using Retrofit to upload images to my server. Here I need to upload multiple images for a single key. I have tried with Postman web client it is working well. Here is a screenshot.

Here are the key value pairs for the request.
SurveyImage : [file1,file2,file3];
PropertyImage : file
DRA : jsonBody

I tried to do the same with Retrofit. but the images are not uploading to the server.Here is my code.
WebServicesAPI.java

public interface WebServicesAPI {
    @Multipart
    @POST(WebServices.UPLOAD_SURVEY)
    Call<UploadSurveyResponseModel> uploadSurvey(@Part MultipartBody.Part surveyImage, @Part MultipartBody.Part propertyImage, @Part("DRA") RequestBody dra);
}

Here is the method for uploading the files.

 private void requestUploadSurvey() {
        File propertyImageFile = new File(surveyModel.getPropertyImagePath());
        RequestBody propertyImage = RequestBody.create(MediaType.parse("image/*"), propertyImageFile);
        MultipartBody.Part propertyImagePart = MultipartBody.Part.createFormData("PropertyImage", propertyImageFile.getName(), propertyImage);
        JSONObject requestBody = getRequestBody();
        RequestBody draBody = null;
        try {
            draBody = RequestBody.create(MediaType.parse("text/plain"), requestBody.toString(1));
            Log.d(TAG, "requestUploadSurvey: RequestBody : " + requestBody.toString(1));
        } catch (JSONException e) {
            e.printStackTrace();
        }
        MultipartBody.Builder builder = new MultipartBody.Builder();
        builder.setType(MultipartBody.FORM);
        MultipartBody surveyImage = null;

            for (SurveyModel.PictureModel model : surveyModel.getPicturesList()) {
                File file = new File(model.getImagePath());
                builder.addFormDataPart("SurveyImage", file.getName(),
                        RequestBody.create(MediaType.parse("image/*"), file));
            }
            surveyImage = builder.build();

        final WebServicesAPI webServicesAPI = RetrofitManager.getInstance().getRetrofit().create(WebServicesAPI.class);
        Call<UploadSurveyResponseModel> surveyResponse = null;

            surveyResponse = webServicesAPI.uploadSurvey(MultipartBody.Part.createFormData("SurveyImage", "SurveyImage", surveyImage), propertyImagePart, draBody);

        surveyResponse.enqueue(this);

        Log.d(TAG, "requestUploadSurvey: sent the request");
    }

Please help me with this.

Answer 1

We can use MultipartBody.Part array to upload an array of images to a single key. Here is the solution
WebServicesAPI

@Multipart
@POST(WebServices.UPLOAD_SURVEY)
Call<UploadSurveyResponseModel> uploadSurvey(@Part MultipartBody.Part[] surveyImage,
                                             @Part MultipartBody.Part propertyImage,
                                             @Part("DRA") RequestBody dra);

Here is the method for uploading the files.

private void requestUploadSurvey () {
    File propertyImageFile = new File(surveyModel.getPropertyImagePath());
    RequestBody propertyImage = RequestBody.create(MediaType.parse("image/*"),
                                                   propertyImageFile);
    MultipartBody.Part propertyImagePart = MultipartBody.Part.createFormData("PropertyImage",
                                                                             propertyImageFile.getName(),
                                                                             propertyImage);

    MultipartBody.Part[] surveyImagesParts = new MultipartBody.Part[surveyModel.getPicturesList()
                                                                               .size()];

    for (int index = 0; index <
                        surveyModel.getPicturesList()
                                   .size(); index++) {
        Log.d(TAG,
              "requestUploadSurvey: survey image " +
              index +
              "  " +
              surveyModel.getPicturesList()
                         .get(index)
                         .getImagePath());
        File file = new File(surveyModel.getPicturesList()
                                        .get(index)
                                        .getImagePath());
        RequestBody surveyBody = RequestBody.create(MediaType.parse("image/*"),
                                                    file);
        surveyImagesParts[index] = MultipartBody.Part.createFormData("SurveyImage",
                                                                     file.getName(),
                                                                     surveyBody);
    }

    final WebServicesAPI webServicesAPI = RetrofitManager.getInstance()
                                                         .getRetrofit()
                                                         .create(WebServicesAPI.class);
    Call<UploadSurveyResponseModel> surveyResponse = null;
    if (surveyImagesParts != null) {
        surveyResponse = webServicesAPI.uploadSurvey(surveyImagesParts,
                                                     propertyImagePart,
                                                     draBody);
    }
    surveyResponse.enqueue(this);
}

Answer 2

I wasted a lot timing on accepted ans. but that didn't work in my case. So after a lot of search i found this one. And its working 100% in my case.

private void uploadMultiFile() {


    ArrayList<String> filePaths = new ArrayList<>();
    filePaths.add("storage/emulated/0/DCIM/Camera/IMG_20170802_111432.jpg");
    filePaths.add("storage/emulated/0/Pictures/WeLoveChat/587c4178e4b0060e66732576_294204376.jpg");
    filePaths.add("storage/emulated/0/Pictures/WeLoveChat/594a2ea4e4b0d6df9153028d_265511791.jpg");

    MultipartBody.Builder builder = new MultipartBody.Builder();
    builder.setType(MultipartBody.FORM);

    builder.addFormDataPart("user_name", "Robert");
    builder.addFormDataPart("email", "mobile.apps.pro.vn@gmail.com");

    // Map is used to multipart the file using okhttp3.RequestBody
    // Multiple Images
    for (int i = 0; i < filePaths.size(); i++) {
        File file = new File(filePaths.get(i));
        builder.addFormDataPart("file[]", file.getName(), RequestBody.create(MediaType.parse("multipart/form-data"), file));
    }


    MultipartBody requestBody = builder.build();
    Call<ResponseBody> call = uploadService.uploadMultiFile(requestBody);
    call.enqueue(new Callback<ResponseBody>() {
        @Override
        public void onResponse(Call<ResponseBody> call, Response<ResponseBody> response) {

            Toast.makeText(MainActivity.this, "Success " + response.message(), Toast.LENGTH_LONG).show();




        }

        @Override
        public void onFailure(Call<ResponseBody> call, Throwable t) {

            Log.d(TAG, "Error " + t.getMessage());
        }
    });


}

and this is interface

@POST("/upload_multi_files/MultiPartUpload.php")
Call<ResponseBody> uploadMultiFile(@Body RequestBody file);

Answer 3

Best solution ever I have tried

ApiInterface:

@Multipart
    @POST("person/img")
    Call<ResponseBody> upImageMany(@Part List<MultipartBody.Part> file);

Activity:

List<MultipartBody.Part> parts = new ArrayList<>();

for (int i=0; i < upFileList.size(); i++){
    parts.add(prepareFilePart("my_file["+i+"]", upFileList.get(i)));
}

private MultipartBody.Part prepareFilePart(String partName, Uri fileUri){

        File file = new File(getPath(fileUri));

        RequestBody requestBody = RequestBody.create(MediaType.parse(getContentResolver().getType(fileUri)), file);

        return MultipartBody.Part.createFormData(partName, file.getName(),requestBody);
    }

Answer 4

Its probably too late to answer this but maybe it will help somebody in future:

The answer below is a modified code of an original one hosted in GitHub: The link to that is : https://github.com/khaliqdadmohmand/upload_file_php_android

some modification done to the original repository are

1. HttpService.java

    @Multipart
    @POST("add_houseimages.php")
    Call<FileModel> callMultipleUploadApi( @Part("markerid")RequestBody markerid,
                                           @Part List<MultipartBody.Part> image);
  //@Part("markerid")RequestBody markerid added part for the string

2. MultiUpload.java function uploadToServer()

public void uploadToServer(){

       List<MultipartBody.Part> list = new ArrayList<>();
       for(Uri uri: images){
           list.add(prepairFiles("file[]", uri));
       }

        //Added section to upload a string
        // listingMarkerId is the string value
        RequestBody markerid = createPartFromString(listingMarkerId);

        HttpService service = RetrofitBuilder.getClient().create(HttpService.class);
        //In the call, add the string as define above by request body 'markerid'
        Call<FileModel> call = service.callMultipleUploadApi(markerid,list);
        call.enqueue(new Callback<FileModel>() {
            @Override
            public void onResponse(Call<FileModel> call, Response<FileModel> response) {
                FileModel model = response.body();
                Toast.makeText(MultiUpload.this, model.getMessage(), Toast.LENGTH_LONG).show();
            }

            @Override
            public void onFailure(Call<FileModel> call, Throwable t) {
                Toast.makeText(MultiUpload.this, t.getMessage(), Toast.LENGTH_LONG).show();
            }
        });

    }

    @NonNull
    private MultipartBody.Part prepairFiles(String partName, Uri fileUri){
        File file = new File( fileUri.getPath());
        RequestBody requestBody = RequestBody.create(MediaType.parse("image/*"), file);

        return  MultipartBody.Part.createFormData(partName, file.getName(), requestBody);
    }

    //Function for the string uploud process

PHP Code for updating the db and the images/file uploaded

3. multi_upload.php

<?php

//adding headers for rest api
header("Content-Type: application/json");
header("Acess-Control-Allow-Origin: *");
header("Acess-Control-Allow-Methods: POST"); // here is define the request method

include 'dbconfig.php'; // include database connection file

$data = json_decode(file_get_contents("php://input"), true); // collect input parameters and convert into readable format

// getting the number of total number of files 
$countfiles = count($_FILES['file']['name']);
$file = $_FILES['file']['name'][0]; // getting first file

if(empty($file))
{
    // if file is empty show error
    $errorMSG = json_encode(array("message" => "please select image", "status" => false));  
    echo $errorMSG;
}
else
{

$upload_path = 'upload/'; // declare file upload path
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif'); // valid image extensions - file extensions

// Looping all files 
for($i=0;$i<$countfiles;$i++){
    $fileName = $_FILES['file']['name'][$i];
    
    //SINGLE STRING UPLOADED
    $markername = $_POST['markerid'];

    $tempPath = $_FILES['file']['tmp_name'][$i];
    $fileSize  =  $_FILES['file']['size'][$i];

    $fileExt = strtolower(pathinfo($fileName,PATHINFO_EXTENSION)); // get image extension

    // check if the files are contain the vALID  extensions
    if(in_array($fileExt, $valid_extensions))
    {               
        //check file not exist our upload folder path
        if(!file_exists($upload_path . $fileName))
        {
            // check file size '5MB' - 5MegaByte is allowed
            if($fileSize < 5000000){

                //built-in method to move file to directory
                move_uploaded_file($tempPath, $upload_path . $fileName); // move file from system temporary path to our upload folder path 
                
                //insert into database table
                $query =  mysqli_query($conn,'INSERT into tbl_image (id,imgname) VALUES("'.$markername.'","'.$fileName.'")');
                
            }
            else{       
                $errorMSG = json_encode(array("message" => "Sorry, your file is too large, please upload 5 MB size", "status" => false));   
                echo $errorMSG;
            }
        }
        else
        {       
            $errorMSG = json_encode(array("message" => "Sorry, file already exists check upload folder", "status" => false));   
            echo $errorMSG;
        }
    }
    else
    {       
        $errorMSG = json_encode(array("message" => "Sorry, only JPG, JPEG, PNG & GIF files are allowed", "status" => false));   
        echo $errorMSG;     
    }
   
   }
}

//if no error message show response
if(!isset($errorMSG))
{   
    echo json_encode(array("message" => "Image Uploaded Successfully", "status" => true));  
}

?>

Every other file in the repository remains as is. Best of luck.

Answer 5

For a single key, you can use,

  @POST("upload/images")
  Observable<YourBaseResponse>
  uploadMultipleImages(@Body RequestBody imagesBody);

And you can create RequestBody as follow,

 public static MultipartBody buildMultipartForMultipleImages(Context context, List<MediaPreviewModel> allAddMediaImages) {

        MultipartBody.Builder builder = new MultipartBody.Builder();
        builder.setType(MultipartBody.FORM);

        for (int index = 0; index < allAddMediaImages.size(); index++) {
            
                builder.addFormDataPart("images", "image" + index, getRequestBodyForImages(context, allAddMediaImages.get(index).getUri()));
            
        }
        return builder.build();

    }

where MediaPreviewModel is a POJO containing images details (URI, filename, extension, size, etc..)

Create request body as

  public static RequestBody getRequestBodyForImages(Context context, Uri uri) {
        File file = null;
        try {
            file = getFile(context, uri);
        } catch (IOException e) {
            e.printStackTrace();
        }
        File file1 = CompressFile.getCompressedImageFile(file, context);
        RequestBody imageReqBody;
        if (file1 != null) {
            imageReqBody = RequestBody.create(file1, MediaType.parse("image/jpg"));
        } else {
            assert file != null;
            imageReqBody = RequestBody.create(file, MediaType.parse("image/jpg"));
        }
        return imageReqBody;
    }