javascript - 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?

Answer 1

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.