PDA

View Full Version : File upload working, but callback always fails



gregbr
17 Nov 2014, 3:06 PM
I started with the code form this example: http://loianegroner.com/2011/07/extjs-4-file-upload-spring-mvc-3-example/

And that got a file upload working up to the server end. That is, I can select a file in my Extjs client, submit the form, and the server receives the file and I can print it out line by line which verifies that I did get the file.

However, the client side call is always failing.

Here's the client side code:



Ext.applyIf(me, {
items: [
{
xtype: 'form',
margins: '5 5 5 5',
region: 'north',
height: 52,
bodyPadding: 10,
title: 'Filters',
standardSubmit: false,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'filefield',
itemId: 'uploader',
width: 500,
hideLabel: true,
name: 'file'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
handler: function(button, e) {
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'http://localhost:8080/ITSCorrectionSvc/upload.action',
waitMsg: 'Uploading and processing your file . . .',
success: function(form, action) {
alert('Success');
},
failure: function(form, action){
alert("Callback Failed : form is " + form + " action is " + action.value);
}
});
}

},




My server side code is quite simple as well :



@Controller
public class FileUploadController {

@RequestMapping(value = "/upload.action", method = RequestMethod.POST)
@ResponseBody
public void uploadFile(WebRequest request, FileUploadBean uploadItem, BindingResult result, HttpServletResponse response){
String successResult = "false";
if(uploadItem.getFile() != null)
{
String fileName = uploadItem.getFile().getOriginalFilename();
byte[] file = uploadItem.getFile().getBytes();
successResult = "true";
CommonsMultipartFile uploadedFile = uploadItem.getFile();
try {
InputStream io = uploadedFile.getInputStream();
BufferedReader reader = new BufferedReader(new InputStreamReader(io));
StringBuilder out = new StringBuilder();
String line;
while ((line = reader.readLine()) != null) {
out.append(line);
out.append("\n");
}
System.out.println(out.toString()); //Prints the string content read from input stream
reader.close();
} catch (IOException e) {
e.printStackTrace();
}

// Some type of file processing
System.err.println("覧覧覧覧覧覧覧-");
System.err.println("Test upload: " + uploadItem.getFile().getOriginalFilename());
System.err.println("覧覧覧覧覧覧覧-");
}
response.setContentType("text/html");
try {
response.getWriter().write("{success:"+successResult+"}");
} catch (IOException e1) {
e1.printStackTrace();
}
return;
}



If I inspect the action inside the failure callback I see that the responseText is
"{success:false,message:"Permission denied to access property 'document'"}"
and a failuretype : "connect"

This usually means that the client can't connect to the server, often because they are on different servers and it's a protection against cross site scripting. But in this case I know that I actually am hitting the server because I can see the file printing out line by line on the server side.

I'm stumped. Does anyone have any ideas why my callback fails?

slemmon
18 Nov 2014, 4:44 PM
Hi,

What does the response look like coming back from your server?

Do you have Content-Type header set to "text/plain" in the response per:
http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Basic-method-hasUpload?

Is the upload cross-origin or it's to the same domain that the client application is running from?

gregbr
21 Nov 2014, 11:29 AM
The response is set to:


response.setContentType("text/html");


I'll try "text/plain" to see if that helps.

The client is running on localhost The server is running on localhost:8080

slemmon
21 Nov 2014, 2:10 PM
If I'm not mistaken you can't upload cross-domain like that. More of a browser limitation.