[AngularJS] Angular 4 - multipart support in HttpClient

[nicolas duminil]

Hello,

>From an Angular component, I need to call a JAX-RS service having this 
signature:

  @POST

  @Path("/import")

  @Produces(MediaType.*APPLICATION_JSON*)

  @Consumes(MediaType.*MULTIPART_FORM_DATA*)

  *public* Response uploadExcelFile(FormDataMultiPart form) *throws* 
Exception


I need to pass in a multi-part having two parts:a file to be uploaded and a 
context as a POJO. I wrote a JAX-RS (Jersey) client allowing me to test the 
service, here is the code:


    FileDataBodyPart filePart = *new* FileDataBodyPart("excel-files", *new* 
File("…"));

    ImportContext ic = *new* ImportContext(…);

    MultiPart multipart = *new** FormDataMultiPart()*.field("import-context", 
ic, MediaType.*APPLICATION_JSON_TYPE*).bodyPart(filePart);

    multipart.setMediaType(MediaType.*MULTIPART_FORM_DATA_TYPE*);

    *resource*.type("multipart/form-data").post(Response.*class*, multipart
);


Calling my service this way works as expected and produces the following 
payload:


--Boundary_1_1795960102_1504711197604

Content-Type: application/json

Content-Disposition: form-data; name="import-context"


{"createMissingBundles":"true","createMissingMessages":"true","importMode":"CREATE_AND_UPDATE","multiple":"false"}

--Boundary_1_1795960102_1504711197604

Content-Type: application/octet-stream

Content-Disposition: form-data; filename="exportTranslations.xls"; 
modification-date="Wed, 06 Sep 2017 12:49:07 GMT"; size=35840; 
name="excel-files"

 

Now, I need to do the same in Angular but I don't find how. I have a 
callback in which I enter with an event having a FormData which already 
contains the file to be uploaded. I need to add the context object. If I do 
that:


public onBeforeSend(event: any) {
this.importContext = new ImportContext(...);
event.formData.append("import-context", JSON.stringify(this.importContext));
}

I have the following payload:

------WebKitFormBoundaryTB8snRJsZf3E31Vp Content-Disposition: form-data; 
name="excel-files"; filename="exportTranslations.xls" Content-Type: 
application/vnd.ms-excel ------WebKitFormBoundaryTB8snRJsZf3E31Vp 
Content-Disposition: form-data; name="import-context" 
{"multiple":false,"createUpdate":null,"createMissingBundles":false,"createMissingMessages":false}
 
------WebKitFormBoundaryTB8snRJsZf3E31Vp--


and the following exception on the server side:


java.lang.IllegalArgumentException: No available MessageBodyReader for 
class com.coface.corp.translationView.utils.imports.ImportContext and media 
type text/plain

at com.sun.jersey.multipart.BodyPart.getEntityAs(BodyPart.java:307)

        ...............

Obviously, not giving any MediaType to the "import-context" part above, 
takes text/plain by defaut, hence the exception. After having googled a 
while, I found out that I could specify the part's MediaType through a 
blob, like this:

event.formData.append("import-context", new 
Blob([JSON.stringify(this.importContext)], 
{ type: "application/json"}));

Doing that produces the following payload:

------WebKitFormBoundary8VRwVcqKrGBn363A Content-Disposition: form-data; 
name="excel-files"; filename="exportTranslations.xls" Content-Type: 
application/vnd.ms-excel ------WebKitFormBoundary8VRwVcqKrGBn363A 
Content-Disposition: form-data; name="import-context"; filename="blob" 
Content-Type: application/json ------WebKitFormBoundary8VRwVcqKrGBn363A--

There is no any more exception in this case, however, there is no any data 
in the blob and, consequently, the correponding parameter on the server 
side is null.

So, after hours of work, I didn't find any way to produce the Angular coide 
equivalent to a simple Java client and I would be very obligated to anybody 
who could help.

As a personal comment, I would like to add that there is such a pain to 
switch to JavaScript, where everything seems so damn inexplicit and 
undocumented, when comming from Java where everything is so clear and specs 
based.

Kind regards,
Nicolas 

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.