Upload File using Angularjs's $http.post and Jersey-Rest-Backend

Question

i have an issue with getting the conent-disposition information from an uploaded file. The file upload itself is just working fine. But the Content-Disposition is null thats why i dont know the name and type ofthe uploaded file. I am triggering the post via angularJs's $http service.

@Path("/myrest")
@Service
public class RestService<Repsonse> {

    private static final String SERVER_UPLOAD_LOCATION_FOLDER = "C://Users/steven/Desktop/upload/";


    /**
     * Upload a File
     */
    @POST
    @Path("/upload")
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response uploadFile(
            @FormDataParam("myForm") InputStream fileInputStream,
            @FormDataParam("myForm") FormDataContentDisposition fileDetail
            ) {


        if (fileDetail == null) {
            System.out.println("form contentDispositionHeader is null");
//          return Response.status(Response.Status.INTERNAL_SERVER_ERROR).entity(Response.Status.INTERNAL_SERVER_ERROR.toString()).build();
        } else {
            System.out.println("form: " + fileDetail.toString());
        }


        Random randomno = new Random();


//      String filePath = SERVER_UPLOAD_LOCATION_FOLDER + contentDispositionHeader.getFileName();
//      String filePath = SERVER_UPLOAD_LOCATION_FOLDER + "bla.png";
        String filePath = SERVER_UPLOAD_LOCATION_FOLDER + "test" + randomno.nextInt(10000)  + ".jpg";


        // save the file to the server
        saveFile(fileInputStream, filePath);

        String output = "File saved to server location : " + filePath;

        return Response.status(200).entity(output).build();


    }

    // save uploaded file to a defined location on the server
    private void saveFile(InputStream uploadedInputStream,
            String serverLocation) {

        OutputStream outpuStream = null;

        try {
            outpuStream = new FileOutputStream(new File(serverLocation));
            int read = 0;
            byte[] bytes = new byte[1024];

            outpuStream = new FileOutputStream(new File(serverLocation));
            while ((read = uploadedInputStream.read(bytes)) != -1) {
                outpuStream.write(bytes, 0, read);
            }

        } catch (IOException e) {
            e.printStackTrace();
        } finally {

            try {

                if(outpuStream != null) {
                    uploadedInputStream.close();    
                }
                if(outpuStream != null) {
                    outpuStream.flush();
                    outpuStream.close();    
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

}

The angularJs part:

js:

var file = $scope.myFile;

that.uploadFileToUrl = function(file, uploadUrl){

    var fd = new FormData();
            fd.append('file', file);

            return $http.post(uploadUrl, fd, {
                transformRequest: angular.identity,
                headers: {'Content-Type': undefined}
            });
        };

The html part:

<div ng-controller="fileUploadController">
input type="file" file-model="myFile"/>

<br>
<br>

Name: {{myFile.name}} <br>
Size: {{myFile.size}} <br>
Type: {{myFile.type}} <br>


<br>
<br>

<button ng-click="uploadFile();">Upload</button>
</div>

Answer 1

Uploading files with ajax is in XHR level 2 spec and not really supported by all browsers...

Prefer an approach like $.fileUpload ( https://blueimp.github.io/jQuery-File-Upload/ ) for sending file in an angular/ one-page application.

If you do know what you are going, just add file.name or file.fileName in another field of your FormData object and get it that way server-side.