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.
The solution for this problem is to pass a List or Array of MultipartBody. Part objects. Retrofit and OkHttp will then build an appropriate multipart request with all files. Java arrays or lists allow you to freely add files as required.
On the UI (User Interface) there is an input field which is used to select multiple files. To select multiple files after clicking on browse button you need to hold Ctrl key (Windows OS) on the keyboard and click on the images you want to select for upload.
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); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With