Two Laptop Bag*
The moose likes Struts and the fly likes Struts2 & XmlHttpRequest & input_file & Html5 Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "Struts2 & XmlHttpRequest & input_file & Html5" Watch "Struts2 & XmlHttpRequest & input_file & Html5" New topic
Author

Struts2 & XmlHttpRequest & input_file & Html5

fres nillo
Greenhorn

Joined: Feb 01, 2011
Posts: 7
Hi all,

I have to said that there are alternatives to this method, but I want to implement this with Struts2 without any new libraries (like ajax-file-upload-struts2), because it works with a simple upload.
I have an action that caught files of a simple form with submit action. It's using in server the FileUpload interceptor and when there is a submit the file go to the server successfully.
Well, the problem happens when it's used an XmlHttpRequest to send this file.
In a summary, here is the code:

var file = document.forms[0].httpFile.files[0]
xmlHttpRequest.open("POST","upload.action",true);
upload = xmlHttpRequest.upload;
upload.addEventListener("progress", function (e) {
if (e.lengthComputable) {
console.log((e.loaded/e.total)*100);
}
}, false);

xmlHttpRequest.setRequestHeader("Cache-Control", "no-cache");
xmlHttpRequest.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xmlHttpRequest.setRequestHeader("Content-Type","application/octet-stream");
xmlHttpRequest.setRequestHeader("X-File-Name", file.name);
xmlHttpRequest.setRequestHeader("X-File-Size", file.fileSize);
xmlHttpRequest.setRequestHeader('Connection', 'close');
xmlHttpRequest.send(file);

The file is sent to server, but when server launch the action, file is null, I tried with inputstream but i have the same problem. If I submit the form from javascript, it works fine but not with XmlHttpRequest and I don't have any idea why it happens (i think that can be changed the request header and send the full form, but I have changed it and didn't work for me!)

By the way, is possible use the HTML5 feature to see what is the percent uploaded with Struts2 framework in server?

Thanks, and sorry for my English
Tom Rispoli
Ranch Hand

Joined: Aug 29, 2008
Posts: 349
The file upload interceptor requires that the request be a multiPartRequest. I have to do this in javascript to make my file upload work when I submitted my form:

document.forms[0].encoding = "multipart/form-data";

However, that might conflict with how an XMLHttpRequest needs to work, so this might not be supported by struts2.
fres nillo
Greenhorn

Joined: Feb 01, 2011
Posts: 7
Hi Tom, thanks for your response, I can tell you that the form has a mutipart/form-data in the <form> tag, because if I do a submit it works perfectly. In the example I changed xmlHttpRequest.setRequestHeader("Content-Type","application/octet-stream") by xmlHttpRequest.setRequestHeader("Content-Type","multipart/form-data"), and the result is the same, debugging is viewed that the client don't send all the data before the server finish his action (File and InputStream has a null value and only has been sent the header data when it happends, seeing the traffic). I think that there is a configuration and it's needed to permit XMLHttpRequest with FileUpload Interceptor because the client waits finish the server action and has a response (in my case an HTML with error because the file is empty).
fres nillo
Greenhorn

Joined: Feb 01, 2011
Posts: 7
Solution:

I test it and works for me, the idea was build all the post source code and send it like this:

var BOUNDARY = "myMark------"+(new Date).getMilliseconds();
var source = '';
source += "--" + BOUNDARY + "\r\n" + "Content-Disposition: form-data; name=\"fileNameInAction\"";
source += '; filename="' + file.name + '"' + "\r\n" + 'Content-type: ' + file.type;
source += "\r\n" + "\r\n" + file.getAsBinary() + "\r\n";
req += "--" + BOUNDARY + '--';
httpRequest.open("POST","action.action");
httpRequest.setRequestHeader("Content-Type", "multipart/form-data; boundary=" + BOUNDARY);
httpRequest.sendAsBinary(req);
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Struts2 & XmlHttpRequest & input_file & Html5