How to use AngularJS $http to send multipart/form-data

Question

I am developing a graphical interface that uses different services rest (written in java). I have to call up a service like this:

@PUT
@Path("nomeServizio")
public Response nomeServizio(final FormDataMultiPart multiPart) {
......}

Call service:

service: function (data) {

            return $http({
                url: PATH_REST_SERVICES + '/nomeServizio',
                headers: {"Content-Type": "multipart/form-data"},
                data: data,
                method: "PUT"
            });
        }

When I request from my Angularjs service file I get: error 400 (bad request) if the service has a Content-Type = multipart / form-data

While I get a 415 (unsupported media type) error if the service has a Content-Type = "application / x-www-form-urlencoded; charset = utf-8" or "application / json; charset = utf-8" or "application / form-data ".

I am developing the front-end in javascript and html5, I did not find anything in the web that can help me as the FormDataMultiPart object does not exist in javascript.

I tried to format the data to send in many ways but it always returns 400 or 415.

How should I format the data to send to the rest call?

And how should the Content-Type be in the headers?

Community · Accepted Answer · 2020-06-20 09:12:55Z

8

How to use AngularJS $http to send FormData

The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the XHR Send method. It uses the same format a form would use if the encoding type were set to multipart/form-data.

var formData = new FormData();

formData.append('type', type);
formData.append('description', description);
formData.append('photo', photo); 

return $http({
    url: PATH_REST_SERVICES + '/nomeServizio',
    headers: {"Content-Type": undefined },
    data: formData,
    method: "PUT"
});

It is important to set the content type header to undefined. Normally the $http service sets the content type to application/json. When the content type is undefined, the XHR API will automatically set the content type to multipart/form-data with the proper multi-part boundary.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 23, 2017 at 16:57

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Anshul Sharma · Accepted Answer · 2017-06-23 16:00:57Z

-1

in java code you need to write code like this:

@POST
@Path("/upload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFile(
    @FormDataParam("file") InputStream uploadedInputStream,
    @FormDataParam("file") FormDataContentDisposition fileDetail) {

for more you can refer bellow example and link :-

https://www.mkyong.com/webservices/jax-rs/file-upload-example-in-jersey/

answered Jun 23, 2017 at 16:00

Anshul Sharma

3,5321 gold badge14 silver badges18 bronze badges

1 Comment

Andrea Pascali Over a year ago

The problem is that I can not change the rest services I use. I should find a solution that allows me to format (with javascript or php) the data in FormDataMultiPart.

Collectives™ on Stack Overflow

How to use AngularJS $http to send multipart/form-data

2 Answers 2

How to use AngularJS $http to send FormData

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

How to use AngularJS $http to send FormData

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related