View Full Version : Problem uploading file?

20 Dec 2011, 9:58 PM
I require to upload a file. I am using the code below as in he extjs 4 documentation -
however the correct parameters are not being sent.
I have also provided request.
Please can you clarify the correct procedure - what is wrong with the code .
Also please can you clarify if an Ajax request is being made?
Thank you,

Ext.define('APP.view.Upload', {
extend: 'Ext.form.Panel',
id: 'upload',
title: 'Upload',
alias: 'widget.uploadfrm',
items: [{
xtype: 'filefield',
name: 'file',
id: 'form-file',
fieldLabel: 'Filename',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select File...'

buttons: [{
text: 'Upload',
handler: function() {
var form = this.up('form').getForm();
form.submit({ url: '/uploadfile',
standardSubmit: true,
waitMsg: 'Uploading your file...',
success: function(fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');

Request URL:http://localhost:9000/uploadfile
Request Method:POST
Status Code:200 OK
Request Headersview source
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryjLCgPFbguC8KGDQq
Cookie:COOKIE_SUPPORT=true; LOGIN=74657374406c6966657261792e636f6d; SCREEN_NAME=354f6775435459594232413d; GUEST_LANGUAGE_ID=en_US
Origin:http://localhost:9000 (http://localhost:9000/)
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.63 Safari/535.7
Request Payload
Content-Disposition: form-data; name="file"; filename="hermes2.log"
Content-Type: application/octet-stream

Response Headersview source
Content-Type:text/plain; charset=utf-8
Server:Play! Framework;1.2.3;dev
Set-Cookie:PLAY_FLASH=;Expires=Tue, 20-Dec-11 18:04:57 GMT;Path=/
PLAY_ERRORS=;Expires=Tue, 20-Dec-11 18:04:57 GMT;Path=/
PLAY_SESSION=;Expires=Tue, 20-Dec-11 18:04:57 GMT;Path=/

The output in the action controller is:
request params {file=file}

21 Dec 2011, 1:09 AM
Please use [CODE] tags when posting code (# button on the editor toolbar).

The new XHR2 spec supports file uploads in AJAX requests but this is not implemented in all browsers. The original XHR used for AJAX requests does not support file uploads. So, to answer your question, an AJAX request will not occur.

File uploads must be done by submitting an HTML form containing a file upload field. ExtJS submits such a form to a hidden IFRAME. This simulates an AJAX request insofar as it makes an HTTP request without leaving the current page. Though Ext.Ajax.request can be used to perform file uploads it is important to realize that it is not actually using an AJAX request to do it.

File upload requests require special handling on the server. This is not an ExtJS-specific requirement, it is common to all web technologies. Most server-side web frameworks provide some sort of support for processing such requests but you shouldn't expect the file to be included as a normal request parameter. You will usually be given access via either a file or a stream of some kind.

The response format also varies slightly from the usual as it must be injected as the contents of the IFRAME.

Judging by the logging you posted it seems that the file upload is occurring in the browser but I don't see the file contents. Have you truncated the logging? It may have been truncated by the browser. From the headers it seems the content is 199 bytes long, does that sound right?

My guess would be that the upload is working but you aren't processing it correctly on the server.

I'm a little concerned by this line:

standardSubmit: true,

I suspect you want to remove that.

21 Dec 2011, 4:33 AM
Thank you for your reply.
I've managed to upload file.
However, the success (callback) function is not being called.
The following ext-js error is being shown in google console.
Please could you explain why this message is occurring?
Thank you,

Uncaught Ext.Error: You're trying to decode an invalid JSON String: <pre style="word-wrap: break-word; white-space: pre-wrap;">&lt;html&gt;&lt;body&gt;&lt;h1&gt;Servlet File Upload Example using Commons File Upload&lt;/h1&gt;&lt;body&gt;{'success': false}&lt;/body&gt;&lt;/html&gt;</pre>
(anonymous function)ext-all-debug.js:5165
(anonymous function)ext-all-debug.js:1537
(anonymous function)


public static void uploadfile(File name) {

System.out.println("Name is "+name.toString());
Files.copy(name, new File("C:\\play-1.2.3\\dest\\UploadTest\\test.dat"));

renderText("<html><body><h1>Servlet File Upload Example using Commons File Upload</h1><body>{'success': false}</body></html>");

21 Dec 2011, 1:13 PM
For the second time, please use [CODE] tags when posting code.

To start with your HTML is wrong, you have two opening body tags.

Are you setting the content-type of the response correctly? Make sure it's text/html.

Have you read the ExtJS docs concerning the expected response format? I don't know what renderText does but from what I can see in your output I would try just returning the JSON rather than all that other stuff.