PDA

View Full Version : UploadFile



Anup Rana
24 Oct 2010, 11:42 PM
How to upload file using EXTJS ?
I am using Action class on the backend to upload file..Can anyone help how to deal with it ?

Condor
24 Oct 2010, 11:59 PM
1. Put a FileUploadField on your form.
2. Configure your form with fileUpload:true.
3. Configure your server so it can handle multi-part uploads.

Anup Rana
25 Oct 2010, 12:10 AM
I'm applying fileUpload:true property to form but it is giving systax error and i am not able to fetch the whole path of the file.
Here is my code.

Ext.onReady(function(){

var uploadfile=new Ext.form.FileUploadField(
{
name: 'FilePath',
emptyText: 'Select File',
fieldLabel: 'Upload File',
width:200,
buttonText: 'Browse'
});

var uploadForm=new Ext.FormPanel({
name:'uploadForm',
id:'uploadForm',
fileUpload:true,

renderTo: document.body,
title:'Upload Form',
autoHeight:true,
width:400,
items:[uploadfile],
buttons: [{
text: 'Save',
handler: function(){
uploadForm.getForm().submit({url: 'UploadFile.action'});

}
}]
});


});

Condor
25 Oct 2010, 12:13 AM
Syntax error where?

ps. Some browsers don't allow access to the file path - Nothing you can do about that.

Anup Rana
25 Oct 2010, 12:14 AM
uploadForm.getForm().submit({url: 'UploadFile.action'});

in this statement..

Condor
25 Oct 2010, 12:19 AM
And what is the error?

Anup Rana
25 Oct 2010, 12:20 AM
Syntax error ()

Condor
25 Oct 2010, 12:41 AM
A bit more information please!

Which line number in ext-all-debug.js or other file (and which Ext version number)?

Anup Rana
25 Oct 2010, 1:05 AM
Error is on linenumber 7389 in ext-all-debug.js and m using ext3.2.1 version.

Condor
25 Oct 2010, 1:09 AM
Line 7389 is in the middle of the Date parsing code! You are not using dates in this example, so that makes no sense what soever!

Anup Rana
25 Oct 2010, 1:13 AM
How to load store dynamically on any event IN EXTJS ?

Condor
25 Oct 2010, 1:20 AM
That depends on the server.

I'm using a J2EE server with Spring, so I could tell you how to configure that one, but for other servers/languages you'll have to search yourself.

srsi
12 Jun 2013, 1:31 AM
Hi Condor,

I have similar problem. Can you please help me a little bit here.

When I submit the form, I am getting an ext-all.js error when I see the IE developer toolbar console on IE8.

Object doesn't support this property or method ext-all.js, line 11 character 123391.

This line has g=this.getMethod(),d=g=="GET";if(e.clientValidation===false||this.form.isValid()).
This ext version is 2.3, I tried using FileUploadField.js from both 2.3 and version 3.4 and has the same error on my console. Please help.

Below is my code, as soon as I submit it stays on waitMsg forever and not even hitting my spring controller.
items: [{
xtype: 'fileuploadfield',
id: 'form-file',
width: 200,
allowBlank: false,
fieldLabel: 'Attachment',
name: 'member'
}],
buttons: [{
text: 'Save',
scope: this,
handler: function(btn, e){
debugger;
if(this.getForm().isValid()){

this.getForm().submit({
url: 'http://localhost:9090/myProject/xxx/memberUtilities/uploadFile',
waitMsg: 'Uploading your file...',
success: function(fp, o){
debugger;
Ext.Msg('Success', 'Processed file "'+o.result.file+'" on the server');
},
failure: function(){
debugger;
}
});

}
}
},{
text: 'Reset',
scope: this,
handler: function(btn, e){
debugger;
this.getForm().reset();
}
}]

My Spring controller test code is as follows.
@RequestMapping(value="/uploadFile", method = RequestMethod.POST)
public @ResponseBody String uploadFile(FileUploadBean uploadItem, BindingResult result)
{

if(uploadItem.getFile() != null)
{
String fileName = uploadItem.getFile().getOriginalFilename();
byte[] file = uploadItem.getFile().getBytes();
}

return "{\"success\":false,\"fileName\":\"dummy.png\"}";
}

FileUploadBean.java as follows:

public class FileUploadBean {

private CommonsMultipartFile file;

public CommonsMultipartFile getFile() {
return file;
}

public void setFile(CommonsMultipartFile file) {
this.file = file;
}
}

I have configured following in my spring config file.
<!-- Configure the multipart resolver -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<!-- one of the properties available; the maximum file size in bytes -->
<property name="maxUploadSize" value="100000"/>
</bean>

It is really urgent to me, please help.

Thanks,
Siddu

guilan
14 Jun 2013, 6:49 AM
I am encountering the similar problem. The error is 'getForm is undefined' here is my code:


this.rootPanel = new Ext.form.FormPanel({
bodyStyle: "padding: 10px;",
title : this.data.data.desc,
autoScroll: true,
fileUpload: true,
labelWidth: 80,
items: [
{
xtype: 'fileuploadfield',
id: 'photo',
emptyText: 'Select a document to upload...',
fieldLabel: 'Photo upload',
buttonAlign:'left',
buttonText: 'Browse'
}],
buttons: [{
text: 'Upload',
handler: function(){
if(this.rootPanel.getForm().isValid()){
form_action=1;
this.rootPanel.getForm().submit({
url: 'upload.php',
waitMsg: 'Uploading file...',
success: function(form,action){
msg('Success', 'Processed file on the server');
}
});
}
}
}]
});
Can anybody help me? Thank you in advance.

willigogs
14 Jun 2013, 11:54 PM
I would imagine using this.rootpanel to reference your form will fail, since the scope of 'this' will change dependent on where you are in the code.

Grab your form via another method, and then check that you are indeed referencing the form (console.log) before running functions against it.