POST Multipart Form Data using Retrofit 2 0 including image

Question

I am trying to do a HTTP POST to server using Retrofit 2 0  MediaType MEDIA TYPE TEXT   MediaType parse  text plain    MediaType MEDIA TYPE IMAGE   MediaType parse  image       ByteArrayOutputStream byteArrayOutputStream   new ByteArrayOutputStream        imageBitmap compress Bitmap CompressFormat JPEG 90 byteArrayOutputStream   profilePictureByte   byteArrayOutputStream toByteArray     Call lt APIResults gt  call   ServiceAPI updateProfile          RequestBody create MEDIA TYPE TEXT  emailString           RequestBody create MEDIA TYPE IMAGE  profilePictureByte     call enqueue      The server returns an error saying the file is not valid    This is weird because I have tried to upload the same file with the same format on iOS using other library   but it uploads successfully   I am wondering what is the proper way to upload an image using Retrofit 2 0     Should I save it to disk first before uploading   P S   I have used retrofit for other Multipart request that does not include image and they completed successfully  The problem is when I am trying to include a byte to the body

User · Answer

So its very simple way to achieve your task. You need to follow below step :-

1. First step

public interface APIService {  
    @Multipart
    @POST("upload")
    Call<ResponseBody> upload(
        @Part("item") RequestBody description,
        @Part("imageNumber") RequestBody description,
        @Part MultipartBody.Part imageFile
    );
}

You need to make the entire call as @Multipart request. item and image number is just string body which is wrapped in RequestBody. We use the MultipartBody.Part class that allows us to send the actual file name besides the binary file data with the request

2. Second step

  File file = (File) params[0];
  RequestBody requestFile = RequestBody.create(MediaType.parse("multipart/form-data"), file);

  MultipartBody.Part body =MultipartBody.Part.createFormData("Image", file.getName(), requestBody);

  RequestBody ItemId = RequestBody.create(okhttp3.MultipartBody.FORM, "22");
  RequestBody ImageNumber = RequestBody.create(okhttp3.MultipartBody.FORM,"1");
  final Call<UploadImageResponse> request = apiService.uploadItemImage(body, ItemId,ImageNumber);

Now you have image path and you need to convert into file.Now convert file into RequestBody using method RequestBody.create(MediaType.parse("multipart/form-data"), file). Now you need to convert your RequestBody requestFile into MultipartBody.Part using method MultipartBody.Part.createFormData("Image", file.getName(), requestBody); .

ImageNumber and ItemId is my another data which I need to send to server so I am also make both thing into RequestBody.

For more info

User · Answer

There is a correct way of uploading a file with its name with Retrofit 2  without any hack   Define API interface    Multipart  POST  uploadAttachment   Call lt MyResponse gt  uploadAttachment  Part MultipartBody Part filePart                                          You can add other parameters too   Upload file like this   File file      initialize file here  MultipartBody Part filePart   MultipartBody Part createFormData  file   file getName    RequestBody create MediaType parse  image      file     Call lt MyResponse gt  call   api uploadAttachment filePart     This demonstrates only file uploading  you can also add other parameters in the same method with  Part annotation

User · Answer

I used Retrofit 2 0 for my register users  send multipart form File image and text from register account  In my RegisterActivity  use an AsyncTask    AsyncTask private class Register extends AsyncTask lt String  Void  String gt          Override     protected void onPreExecute              Override     protected String doInBackground String    params            new com tequilasoft mesasderegalos dbo Register   register txtNombres  selectedImagePath  txtEmail  txtPassword           responseMensaje   StaticValues mensaje           mensajeCodigo   StaticValues mensajeCodigo          return String valueOf StaticValues code               Override     protected void onPostExecute String codeResult         And in my Register java class is where use Retrofit with synchronous call  import android util Log  import com tequilasoft mesasderegalos interfaces RegisterService  import com tequilasoft mesasderegalos utils StaticValues  import com tequilasoft mesasderegalos utils Utilities  import java io File  import okhttp3 MediaType  import okhttp3 MultipartBody  import okhttp3 RequestBody  import okhttp3 ResponseBody  import retrofit2 Call   import retrofit2 Response     Created by sam on 2 09 16    public class Register    public void register String nombres  String selectedImagePath  String email  String password        try              create upload service client         RegisterService service   ServiceGenerator createUser RegisterService class               add another part within the multipart request         RequestBody requestEmail                   RequestBody create                          MediaType parse  multipart form-data    email              add another part within the multipart request         RequestBody requestPassword                   RequestBody create                          MediaType parse  multipart form-data    password              add another part within the multipart request         RequestBody requestNombres                   RequestBody create                          MediaType parse  multipart form-data    nombres            MultipartBody Part imagenPerfil   null          if selectedImagePath  null               File file   new File selectedImagePath               Log i  Register   Nombre del archivo   file getName                    create RequestBody instance from file             RequestBody requestFile                       RequestBody create MediaType parse  multipart form-data    file                  MultipartBody Part is used to send also the actual file name             imagenPerfil   MultipartBody Part createFormData  imagenPerfil   file getName    requestFile                         finally  execute the request         Call lt ResponseBody gt  call   service registerUser imagenPerfil  requestEmail requestPassword requestNombres           Response lt ResponseBody gt  bodyResponse   call execute            StaticValues code    bodyResponse code            StaticValues mensaje    bodyResponse message            ResponseBody errorBody   bodyResponse errorBody            StaticValues mensajeCodigo    errorBody  null                  null                  Utilities mensajeCodigoDeLaRespuestaJSON bodyResponse errorBody   byteStream             Log i  Register   Code   StaticValues code           Log i  Register   mensaje   StaticValues mensaje           Log i  Register   mensajeCodigo   StaticValues mensaje             catch  Exception e           e printStackTrace                In the interface of RegisterService  public interface RegisterService    Multipart  POST StaticValues REGISTER  Call lt ResponseBody gt  registerUser  Part MultipartBody Part image                                   Part  email   RequestBody email                                   Part  password   RequestBody password                                   Part  nombre   RequestBody nombre        For the Utilities parse ofr InputStream response  public class Utilities   public static String mensajeCodigoDeLaRespuestaJSON InputStream inputStream       String mensajeCodigo   null      try           BufferedReader reader   new BufferedReader                  new InputStreamReader                      inputStream   iso-8859-1    8           StringBuilder sb   new StringBuilder            String line          while   line   reader readLine       null                sb append line  append   n                      inputStream close            mensajeCodigo   sb toString          catch  Exception e            Log e  Buffer Error    Error converting result     e toString               return mensajeCodigo

User · Answer

I am highlighting the solution in both 1 9 and 2 0 since it is useful for some  In 1 9  I think the better solution is to save the file to disk and use it as Typed file like   RetroFit 1 9   I don t know about your server-side implementation  have an  API interface method similar to this   POST   en Api Results UploadFile   void UploadFile  Part  file   TypedFile file                   Part  folder   String folder                  Callback lt Response gt  callback     And use it like  TypedFile file   new TypedFile  multipart form-data                                          new File path      For RetroFit 2 Use the following method  RetroFit 2 0   This was a workaround for an issue in RetroFit 2 which is fixed now  for the correct method refer jimmy0251 s answer   API Interface   public interface ApiInterface         Multipart      POST   api Accounts editaccount       Call lt User gt  editUser  Header  Authorization   String authorization                           Part  file    filename   pp png      RequestBody file                           Part  FirstName   RequestBody fname                           Part  Id   RequestBody id       Use it like   File file   new File imageUri getPath      RequestBody fbody   RequestBody create MediaType parse  image                                             file    RequestBody name   RequestBody create MediaType parse  text plain                                          firstNameField getText                                                        toString      RequestBody id   RequestBody create MediaType parse  text plain                                        AZUtils getUserId this     Call lt User gt  call   client editUser AZUtils getToken this                                     fbody                                    name                                    id    call enqueue new Callback lt User gt            Override     public void onResponse retrofit Response lt User gt  response                             Retrofit retrofit             AZUtils printObject response body                 Override     public void onFailure Throwable t             t printStackTrace

User · Answer

Update Code for image file uploading in Retrofit2 0  public interface ApiInterface         Multipart      POST  user signup       Call lt UserModelResponse gt  updateProfilePhotoProcess  Part  email   RequestBody email                                                         Part  password   RequestBody password                                                         Part  profile pic    filename   pp png                                                                 RequestBody file       Change MediaType parse  image     to MediaType parse  image jpeg    RequestBody reqFile   RequestBody create MediaType parse  image jpeg                                             file   RequestBody email   RequestBody create MediaType parse  text plain                                            upload test4 gmail com    RequestBody password   RequestBody create MediaType parse  text plain                                               123456789     Call lt UserModelResponse gt  call   apiService updateProfilePhotoProcess email                                                                      password                                                                      reqFile   call enqueue new Callback lt UserModelResponse gt            Override     public void onResponse Call lt UserModelResponse gt  call                             Response lt UserModelResponse gt  response             String                 TAG                   response body                            toString             UserModelResponse userModelResponse   response body            UserModel userModel   userModelResponse getUserModel             Log d  MainActivity                  user image       userModel getProfilePic                  Override     public void onFailure Call lt UserModelResponse gt  call                            Throwable t             Toast makeText MainActivity this                              TAG                         Toast LENGTH LONG                show

User · Answer

Don t use multiple parameters in the function name just go with simple few args convention that will increase the readability of codes  for this you can do like -     MultipartBody Part createFormData  partName   data  Call lt SomReponse gt  methodName  Part MultiPartBody Part part      RequestBody create MediaType get  text plain    data  Call lt SomReponse gt  methodName  Part value    partName   RequestBody part       for single use or you can use by Part name with Request body        add multiple list of part as abstraction  ease of readability  Call lt SomReponse gt  methodName  Part List lt MultiPartBody Part gt  parts    Call lt SomReponse gt  methodName  PartMap Map lt String  RequestBody gt  parts      this way you will save the abstraction of multiple parts    There can be multiple exceptions that you may encounter while using Retrofit  all of the exceptions documented as code  have a walkthrough to retrofit2 RequestFactory java  you can able to two functions parseParameterAnnotation and parseMethodAnnotation where you can able to exception thrown  please go through this  it will save your much of time than googling stackoverflow

User · Answer

in kotlin its quite easy  using extensions methods of toMediaType  asRequestBody and toRequestBody here s an example   here I am posting a couple of normal fields along with a pdf file and an image file using multipart  this is API declaration using retrofit        Multipart      POST  api Lesson AddNewLesson       fun createLesson           Part  userId   userId  RequestBody           Part  LessonTitle   lessonTitle  RequestBody           Part pdf  MultipartBody Part           Part imageFile  MultipartBody Part        Maybe lt BaseResponse lt String gt  gt    and here is how to actually call it   api createLesson              userId toRequestBody  text plain  toMediaType                 lessonTitle toRequestBody  text plain  toMediaType                 startFromRegister toString   toRequestBody  text plain  toMediaType                 MultipartBody Part createFormData                   jpeg                   imageFile name                  imageFile asRequestBody  image    toMediaType                               MultipartBody Part createFormData                   pdf                   pdfFile name                  pdfFile asRequestBody  application pdf  toMediaType

User · Answer

Kotlin version with update for deprication of RequestBody create    Retrofit interface   Multipart  POST  uploadPhoto   fun uploadFile  Part file  MultipartBody Part   Call lt FileResponse gt    and to Upload  fun uploadFile fileUrl  String       val file   File fileUrl      val fileUploadService   RetrofitClientInstance retrofitInstance create FileUploadService  class java      val requestBody   file asRequestBody file extension toMediaTypeOrNull        val filePart   MultipartBody Part createFormData           blob  file name requestBody           val call   fileUploadService uploadFile filePart       call enqueue object  Callback lt FileResponse gt           override fun onFailure call  Call lt FileResponse gt   t  Throwable                Log d TAG  Fckd                      override fun onResponse call  Call lt FileResponse gt   response  Response lt FileResponse gt                 Log d TAG  success  response toString       response body   toString        response body    status                        Thanks to  jimmy0251

User · Answer

Adding to the answer given by  insomniac  You can create a Map to put the parameter for RequestBody including image    Code for Interface  public interface ApiInterface    Multipart  POST   api Accounts editaccount   Call lt User gt  editUser   Header  Authorization   String authorization   PartMap Map lt String  RequestBody gt  map       Code for Java class  File file   new File imageUri getPath     RequestBody fbody   RequestBody create MediaType parse  image      file   RequestBody name   RequestBody create MediaType parse  text plain    firstNameField getText   toString     RequestBody id   RequestBody create MediaType parse  text plain    AZUtils getUserId this     Map lt String  RequestBody gt  map   new HashMap lt  gt     map put  file    filename   pp png      fbody   map put  FirstName   name   map put  Id   id   Call lt User gt  call   client editUser AZUtils getToken this   map   call enqueue new Callback lt User gt       Override public void onResponse retrofit Response lt User gt  response  Retrofit retrofit         AZUtils printObject response body         Override public void onFailure Throwable t        t printStackTrace

User · Answer

Uploading Files using Retrofit is Quite Simple You need to build your api interface as   public interface Api        String BASE URL    http   192 168 43 124 ImageUploadApi           Multipart      POST  yourapipath       Call lt MyResponse gt  uploadImage  Part  image    filename   myfile jpg      RequestBody file   Part  desc   RequestBody desc        in the above code image is the key name so if you are using php you will write   FILES  image    tmp name   to get this  And filename  myfile jpg  is the name of your file that is being sent with the request    Now to upload the file you need a method that will give you the absolute path from the Uri    private String getRealPathFromURI Uri contentUri        String   proj    MediaStore Images Media DATA       CursorLoader loader   new CursorLoader this  contentUri  proj  null  null  null       Cursor cursor   loader loadInBackground        int column index   cursor getColumnIndexOrThrow MediaStore Images Media DATA       cursor moveToFirst        String result   cursor getString column index       cursor close        return result      Now you can use the below code to upload your file     private void uploadFile Uri fileUri  String desc               creating a file         File file   new File getRealPathFromURI fileUri               creating request body for file         RequestBody requestFile   RequestBody create MediaType parse getContentResolver   getType fileUri    file           RequestBody descBody   RequestBody create MediaType parse  text plain    desc              The gson builder         Gson gson   new GsonBuilder                    setLenient                    create                creating retrofit object         Retrofit retrofit   new Retrofit Builder                    baseUrl Api BASE URL                   addConverterFactory GsonConverterFactory create gson                    build               creating our api          Api api   retrofit create Api class              creating a call and calling the upload image method          Call lt MyResponse gt  call   api uploadImage requestFile  descBody              finally performing the call          call enqueue new Callback lt MyResponse gt                   Override             public void onResponse Call lt MyResponse gt  call  Response lt MyResponse gt  response                    if   response body   error                        Toast makeText getApplicationContext     File Uploaded Successfully      Toast LENGTH LONG  show                      else                       Toast makeText getApplicationContext     Some error occurred      Toast LENGTH LONG  show                                                  Override             public void onFailure Call lt MyResponse gt  call  Throwable t                    Toast makeText getApplicationContext    t getMessage    Toast LENGTH LONG  show                                      For more detailed explanation you can visit this Retrofit Upload File Tutorial

[android] POST Multipart Form Data using Retrofit 2.0 including image

Examples related to android

Examples related to retrofit

Examples related to androidhttpclient

Examples related to retrofit2