如何将请求从动作表单发送到angularjs

Question

im using this code to upload file to my REST API, and it works fine , this is my form :

<form action="webresources/documents/upload" 
      method="post" 
      enctype="multipart/form-data">

    <p>
        Select a file : 
        <input type="file" name="file" size="45" />
    </p>
    <input type="submit" value="Upload" />

</form>

and this is my REST API :

@POST
    @Path("/upload")
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response uploadFile(@MultipartForm Document document) {
.....
}

my question is: how to send the same request using angularjs instead of using action="webresources/documents/upload" on my form.

Answer 1

You don't require a form tag,

This is how your HTML would look like,

 <p>
        Select a file : 
        <input type="file" name="file" size="45" />
    </p>
<button ng-click="upload()">Upload</button>

Your controller code would be something like this,

$scope.upload = function () {
  var fd = new FormData();
  fd.append('file', file);

  $http({
    url: 'webresources/documents/upload',
    data: fd,
    method: "POST",
    headers: {
      "Content-Type": undefined
    }
  });
}

This will upload your file to the server without form tags.