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

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.