Upload picture to server using retrofit 2

Question

First of all lets look to the code:

public interface ApiInterface {
    @Multipart
    @POST("my/files/photo/")
    Call<FileUploadResponse> uploadPhoto(@Header("authorization") String auth,
                                     @Part MultipartBody.Part file,
                                     @Part("file-type") RequestBody fileType);
}

I'm calling this interface like this:

RequestBody body = RequestBody.create(MediaType
            .parse(getContentResolver().getType(fileUri)), file);
MultipartBody.Part avatarBody = MultipartBody.Part
            .createFormData(data, file.getName(), body);
RequestBody fileType = RequestBody.create(
            MediaType.parse("text/plain"), "profile");
client.uploadPhoto(getToken(), avatarBody, fileType);

From server i'm getting response that "File type not provided". If i change places of file and filetype on uploadPhoto function like this:

@Multipart
@POST("my/files/photo/")
Call<FileUploadResponse> uploadPhoto(@Header("authorization") String auth,
                                 @Part("file-type") RequestBody fileType
                                 @Part MultipartBody.Part file);

I'm getting response "File not provided". I've checked server with my own code written on JS:

<!DOCTYPE html>
<script language="JavaScript" type="text/javascript" src="C://Users/User/Downloads/jquery-3.2.1.min.js"></script>

<form action="">
  <input type="text" name="authorize" id="authorize">
  <br>
  <input type="file" name="photo" accept="image/*" id="filechooser" onchange="onFileChange(this)" >
  <br>
  <input value="profile" type="text" name="file-type" id="type">
  <br>
  <input type="button" onclick="uploadFile()">
</form>


<script>
var blobFile;
function onFileChange(ss) {
 blobFile = ss.files[0];
 alert(blobFile);
}
function uploadFile() {

 var storedJWT = $('#authorize').val();
 var fileType = $('#type').val();
    var formData = new FormData();
    formData.append("file-type", fileType);
 formData.append("photo", blobFile);
 console.log(storedJWT);
    $.ajax({
       url: "url",
       type: "POST",
       data: formData,
    headers: {
        authorization: storedJWT
    },
       processData: false,
       contentType: false,
       success: function(response) {
     console.log(response);
       },
       error: function(jqXHR, textStatus, errorMessage) {
           console.log(errorMessage);
       }
    });
}</script>

everything working fine. Script on JS generating request like this:

Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8
authorization:JWT token
Connection:keep-alive
Content-Length:67601
Content-Type:multipart/form-data; boundary=----
WebKitFormBoundary3MtpMA70hG41luF1
Host:localhost
------WebKitFormBoundary3MtpMA70hG41luF1
Content-Disposition: form-data; name="file-type"

profile
------WebKitFormBoundary3MtpMA70hG41luF1
Content-Disposition: form-data; name="photo"; filename="1231231313.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary3MtpMA70hG41luF1--

and the retrofit request is:

Content-Type: multipart/form-data; boundary=238182ad-d99c-4d44-9ba6-7d178a14b2e9
Content-Length: 59776
authorization: JWT token
--238182ad-d99c-4d44-9ba6-7d178a14b2e9
Content-Disposition: form-data; name="photo"; filename="1502703422332.jpg"
Content-Type: image/jpeg
Content-Length: 59369
//bytes
--238182ad-d99c-4d44-9ba6-7d178a14b2e9
Content-Disposition: form-data; name="file-type"
Content-Transfer-Encoding: binary
Content-Type: text/plain; charset=utf-8
Content-Length: 7
profile
--238182ad-d99c-4d44-9ba6-7d178a14b2e9--

I can't understand where can be error...

score 1 · Accepted Answer · answered Aug 22 '17 at 11:59

After many search I found that server not handling headers like

Content-Transfer-Encoding: binary
Content-Type: text/plain; charset=utf-8

and i have to remove these headers from my request. And the solution is creating upload function in my API Interface like this:

@POST("my/files/photo/")
    Call<FileUploadResponse> uploadPhoto(@Header("Content-Type") String contentType,
                                          @Header("Authorization") String auth,
                                          @Body MultipartBody body);

and call this function like:

ApiClient.ApiInterface client = ApiClient.getClient();
File file = new File(getPathFromUri(fileUri));
RequestBody fileBody = RequestBody.create(MediaType.parse(getContentResolver().getType(fileUri)), file);
MultipartBody body = new MultipartBody.Builder().addFormDataPart("file-type", "profile")
                .addFormDataPart("photo", "image.png", fileBody)
                .build();
client.uploadPhoto("multipart/form-data; boundary=" + body.boundary(),
                    PrefManager.getInstance().getToken(), body);

As result I get request below:

Content-Type: multipart/form-data; boundary=27ec8d66-d29d-48aa-a2fe-08c6664b10c7
Content-Length: 56412
Authorization: JWT token
--27ec8d66-d29d-48aa-a2fe-08c6664b10c7
Content-Disposition: form-data; name="file-type"
Content-Length: 7
profile
--27ec8d66-d29d-48aa-a2fe-08c6664b10c7
Content-Disposition: form-data; name="photo"; filename="image.png"
Content-Type: image/jpeg
Content-Length: 56089
/* bytes */
--27ec8d66-d29d-48aa-a2fe-08c6664b10c7--

And it works fine.

Upload picture to server using retrofit 2

1 Answers1

Linked