I'm implementing a file upload in a web application.
The front-end is written in angularJS and uses the angular-file-upload package (the one that can be found at this link https://github.com/nervgh/angular-file-upload).
The back-end is Java / Jersey Web Services.
My Question is:
The uploaded file contains a WebKitFormBoundary header and footer, like this:
------WebKitFormBoundarylqskdjlqksdjl
Content-Disposition: form-data; name="upload"; filename="foo.bar"
Content-Type: multipart/form-data
Therefore, I'm not sure whether I'm uploading a file or a request. And of course, my back-end application considers that the uploaded files are corrupted and would not display them unless those lines are removed (for now manually).
Bottom line is : how do I get rid of that header and footer in the uploaded file?
Here are some code samples.
Front-End
Once again: angularJS angular-file-upload
item.headers = {
'Content-Disposition': 'attachment; filename="' + item.file.name + '"',
'Content-Type': 'multipart/form-data'
};
Back-End
and Java / Jersey
#POST
#Produces(MediaType.APPLICATION_JSON)
#Consumes(MediaType.MULTIPART_FORM_DATA)
#Path("someurl/{fileName}")
public Artifact uploadArtifact(InputStream uploadedStream, #PathParam("fileName") String fileName) throws Exception;
Note
I'm wondering if the Content-Disposition: attachment in my angularJS part could be what's messing it up?
And that it should rather be Content-Disposition: form-data?
Thx in advance!
You need to place #FormDataParam annotation in order to properly handle boundary.
#POST
#Produces(MediaType.APPLICATION_JSON)
#Consumes(MediaType.MULTIPART_FORM_DATA)
#Path("someurl/{fileName}")
public Artifact uploadArtifact(
#FormDataParam("file") InputStream uploadedStream,
#FormDataParam("file") FormDataContentDisposition fileDetails,
#PathParam("fileName") String fileName) throws Exception;
Related
I know how to create endpoints that are handling files using MediaType.MULTIPART_FORM_DATA and #FormDataParam("file") FormDataBodyPart bodyPart, but I was wondering if I can also have JSON data along that request? Something like:
#POST
#Path("somepath")
#Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFileAndJSON(#RequestBody SomeModel someModel,
#FormDataParam("file") FormDataBodyPart bodyPart) {
return null;
}
At the moment if I add some JSON data on the "raw" tab on the following Postman request I'm getting HTTP 415 Unsupported Media Type probably because I specified that I consume MULTIPART_FORM_DATA but I'm also using #RequestBody which is looking for JSON content which is APPLICATION_JSON. So how can I have JSON data and a file handled in the same request? I know that it's possible to do that in two requests, I just want to do it in one if possible?
Why are you using both Spring and Jersey annotations? You should stick to using the annotations meant for the framework. Since you are using Jersey, should stick to its its annotations.
So here are the things to consider about your current code and environment.
There can't be two separate bodies. With your code, that's what it appears you expect to happen.
You can though put the JSON as part of the multi-part body. For that you should also annotate the SomeModel with the Jersey #FormDataParam
#POST
#Path("somepath")
#Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFileAndJSON(
#FormDataParam("model") SomeModel someModel,
#FormDataParam("file") FormDataBodyPart bodyPart) {
}
In the Jersey configuration, you need to make sure to register the MultiPartFeature. If you don't the body won't be able to be deserialized, and you will get exceptions and error responses.
Now the Postman problem. You can see similar problem here. The problem was that the Content-Type was not set for the JSON body part. For example the body might look something like
--AaB03x
Content-Disposition: form-data; name="model"
{"some":"model", "data":"blah"}
--AaB03x
Content-Disposition: form-data; name="file"; filename="file1.txt"
Content-Type: text/plain
... contents of file1.txt ...
--AaB03x--
You can actually see the body, if you hit the Preview button in Postman. The problem is that there is no Content-Type for the "model" part, as you can see in the "file" part. This happens because you can't set individual parts' Content-Type in Postman. The one that you will see will be discovered from the file extension. For example a .txt file will make Postman set the Content-Type to text/plain and a .png file to image/png.
If you look in the link above, I proposed maybe you could use a .json file instead of typing in the data. Of course that was just a theory. I didn't actually test it.
In any case, the Content-Type must be set in order for Jersey to be able to know to deserialize it as JSON. If the .json file extension theory doesn't pan out, then you can use a different client, like cURL, which I showed an example in the link, or you can use the Jersey client to test, as seen here.
Don't set the Content-Type header to multipart/form-data in Postman. It sets it for you when you use the form-data. I just saw a post where someone said there is bug when you set the header. Can't find the post now, and not something I've confirmed, but I'd just leave it out.
UPDATE
So the OP was able to find a way to set the Content-Type: application/json to the "model" part. But it is sometimes the case where with a Javascript client, you are not able to set it. So there will be no Content-Type. If this is the case, Jersey will not be able to deserialize the JSON, as it has no idea that it is actually JSON being sent. If you absolutely can't or have no idea how to set the Content-Type for individual parts, you could resort to doing the following.
#POST
#Path("somepath")
#Consumes(MediaType.MULTIPART_FORM_DATA)
public Response uploadFileAndJSON(#FormDataParam("model") FormDataBodyPart jsonPart,
#FormDataParam("file") FormDataBodyPart bodyPart) {
jsonPart.setMediaType(MediaType.APPLICATION_JSON_TYPE);
SomeModel model = jsonPart.getValueAs(SomeModel.class);
}
Yes, you can get that as multipart form data.
you get like this in angularjs:
$scope.uploadFile = function () {
var file = $scope.selectedFile[0];
$scope.upload = $upload.upload({
url: 'api/upload',
method: 'POST',
data: angular.toJson($scope.model),
file: file
}).progress(function (evt) {
$scope.uploadProgress = parseInt(100.0 * evt.loaded / evt.total, 10);
}).success(function (data) {
//do something
});
};
$scope.onFileSelect = function ($files) {
$scope.uploadProgress = 0;
$scope.selectedFile = $files;
};
public Response uploadFileAndJSON(#RequestParam("data") String data,
#MultiPartFile("file")File file) {
you can data as form data and convert it
like you want to your object using Gson jar.
return null;
}
Have a look at it for angularjs code:
Angularjs how to upload multipart form data and a file?
https://puspendu.wordpress.com/2012/08/23/restful-webservice-file-upload-with-jersey/
My payload has the Content-Disposition field. I am trying to upload a bpmn file. So at backend i need to parse the input stream and extract this file name. but i am not able to find a solution of this. I am using jesrey for rest.
I tried with :
#POST
#Consumes(MediaType.MULTIPART_FORM_DATA)
#Produces(MediaType.APPLICATION_JSON)
public Response addWorkflowSchema(#FormDataParam("bpmndata") InputStream uploadedInputStream,
String filename,
#Context HttpServletRequest request)
to get whole payload data. but only if i remove FormDataParam i ma getting request body.
Reuqest Payload :
------WebKitFormBoundary8CCb878TyZksE9go
Content-Disposition: form-data; name="bpmndata"; filename="process.bpmn"
Content-Type: application/octet-stream
------WebKitFormBoundary8CCb878TyZksE9go--
I need to get filename from Content-Disposition. How can i get this.
Just inject the FormDataContentDisposition also, and get the file name from that.
public Response addWorkflowSchema(
#FormDataParam("bpmndata") InputStream in,
#FormDataParam("bpmndata") FormDataContentDisposition fdc) {
String fileName = fdc.getFileName();
}
The InputStream will only be the content of the file part. It won't include the headers, so you don't need to extract anything from it.
I want to send a folder or list of files in the particular folder as response to the client via REST using java. My server side is EJB.
I am trying with following code. But got FileNotFoundException
#GET
#Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response getFiles() {
File file = new File("C:\Documents and Settings\Administrator\Desktop\MyFolder");
return Response.ok(file, MediaType.APPLICATION_OCTET_STREAM).build();
}
Tried with the following code. But got NullPointerException
#GET
#Produces(MediaType.APPLICATION_OCTET_STREAM)
public Response getFiles() {
File file = new File("C:\Documents and Settings\Administrator\Desktop\MyFolder");
ResponseBuilder response = Response.ok(file.listFiles());
response.header("Content-Disposition", "inline; filename=units.zip");
return response.build();
}
Working in a windows machine.
Can anyone give me any advice, or examples of working code to conform to?
Either use forward slashes or double backslashes in the file name.
Also, don't expect the folder to be zipped automagically. You'll have to create the ZIP archive and pass it to the Response.
I'm using Jersey to upload a file.
This is the rest:
#Path("/MyUpload")
#POST
#Consumes(MediaType.MULTIPART_FORM_DATA)
#Produces(MediaType.TEXT_PLAIN)
public String MyUpload(#Context HttpServletRequest request,
#FormDataParam("file") InputStream uploadedInputStream,
#FormDataParam("file") FormDataContentDisposition fileInfo) {
// here I’m handling the input stream
…
return “Ok”;
}
When I send a file with size more than 10KB I get 400 bad request for this method.
Any ideas?
I'm running my app on tomcat7 with linux red hat 6.2.
Thanks..
One problem is that you are fetching both the request multipart params using the same name file. You need to distinguish the two parts using different names for multipart params.
My solution is: change the buggy Jersey libs from version 1.13 (or lower) to the latest version. 1.17 and 1.19 worked for me.
I'm attempting to create ajax functionality to a form that uploads files. I created the isolated iframe and target the form submission to it. The server validates the files and sends back an XML doc in the response body. How would I handle and retrieve the XML doc on the client side, preferably using JavaScript?
This is my handler,
#Controller
#RequestMapping("/upload")
public class UploadController {
#RequestMapping(method = RequestMethod.POST)
public String handleFileUpload(HttpServletResponse response, #RequestParam("file") MultipartFile file) throws IOException{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<test>hello</test>");
return null;
}
}
We do something similar but return JSON instead of XML. That JSON is then used as-is by the JavaScript function that triggers the upload ----
If i use the response type as json in the iframe form submit for file upload..i am seeing a download popup asking me to save or open... the application/json response is handled by the browser as a download ... issue occurs in IE and older versions of FF
There were several suggestions on using a hidden iframe on the net. That's what my final attempt was, I sent an xml doc to the iframe's body and manage the data from there.