I am uploading a file to a REST API using this plugin in an AngularJS application.
When seconds after the 'fileuploaddone' event fires, I get a yellow notification from Internet Explorer saying: Would you like to save \ open the
Screenshot attached.
Iframe based uploads require a Content-type of text/plain or text/html for the JSON response - they will show an undesired download dialog if the iframe response is set to application/json.
Source: https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation
You will need to set the right Content-Type as explained in the link above.
Blueimp jQuery File Upload settings to support modern browsers as well as IE9 (tested on IE9 and Chrome 39)
Note: I am using JAVA, Spring 3 on server side
index.html file
<!doctype html>
<!--[if lt IE 9]> <html class="lt-ie9"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>....</head>
<body>....</body>
</html>
test.js file
var options = {
url: 'api/test/fileupload',
maxFileSize: 10000000,
formData: {
id: 1
}
};
if ($('html').hasClass('ie9') || $('html').hasClass('lt-ie9')) {
options.forceIframeTransport = true;
} else {
options.dataType = 'json';
}
$('#fileUploadInput').fileupload(options);
test.java file
@POST
@Path("/api/test/fileupload")
@Consumes(MediaType.MULTIPART_FORM_DATA)
@Produces({ "text/plain" })
public Response uploadFile(
@Context HttpServletResponse response,
@Context HttpServletRequest request,
@FormDataParam("id") Long id,
@FormDataParam("files[]") FormDataContentDisposition fileDetail,
@FormDataParam("files[]") InputStream uploadedInputStream) {
String header = request.getHeader("accept");
String returnContentType = MediaType.APPLICATION_XML;
VEWTestAttachment attObj = testMgr.saveAttachment(id,fileDetail,uploadedInputStream);
if(header.indexOf(MediaType.APPLICATION_JSON) >= 0){
returnContentType = MediaType.APPLICATION_JSON;
}
response.setContentType(returnContentType);
return Response
.ok(attObj,returnContentType)
.build();
}