ExtJs 3 – Enabling multiple file uploads using TextField

by Rahul Singla | Mar 20, 2012 | Blog, ExtJs, ExtJs 3.x, Javascript | 10 comments

Well I just committed code on one of my projects enabling multiple file uploads using an ExtJs 3 TextField. And it appeared to me I can write a quick blog post about it.

So without wasting too much time, I will allow you to straightaway get your hands dirty with the code to produce multiple-file upload textfield:

{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }{
xtype: ‘textfield’,
inputType: ‘file’,
fieldLabel: ‘Multiple file selection’,
autoCreate: { tag: ‘input’, type: ‘text’, size: ’20’, autocomplete: ‘off’, multiple: ‘multiple’ },
}{/syntaxhighlighter}

The key here is the autoCreate config option of Ext.form.Field class (inherited by TextField) that we overrode to render a multiple=”multiple” attribute for the textfield’s dom.

And you can see the results below:

10 Comments

sam on May 24, 2012 at 11:56 pm

Hi Rahul,

I am using Extjs 3. I have created a login page with several images. Login form i have called in a window. That window have to come to the left side of the screen so i have used x and y to move in the screen. For that images i have used html <table> tag. It is coming well in my screen that x and y value i have getting through browserwidth and height by calculating percentage wise. But if screen resolution increases then that window won’t come in proper position. Is there any way to over come this screen resolution issue?? Please help in this issue.

Thanks in advance
Reply

Pooja Garg on July 14, 2012 at 5:12 am

I have a field in which I have browse button for uploading images
here is code:

Code:

                               xtype: 'textfield',
                               fieldLabel: "&nbsp;&nbsp;&nbsp;Image1",
                               id: 'image1',
                               name: 'image1',
                               inputType:'file',
                               width:40

Suppose I browsed an image in this field n the value of that field is
C:\Documents and Settings\pgar\Desktop\Android\coursal3.jpg

Now when m getting value from this field through :

Code:

                    var image1 = Ext.getCmp("image1").getValue();
                    alert(image1);

I am getting value as “coursal3.jpg” in alert but I want full path value i.e.
“C:\Documents and Settings\pgar\Desktop\Android\coursal3.jpg”

pooja on July 16, 2012 at 2:36 am

So what I should do?? As I m browsing an image suppose from C:/public/users/My Documents/My Pictures/Sunset.jpg

now when I click on save I am copying that image and moving it to other folder suppose images/ which resides in my Project dir/ and saving only the name of image “Sunset.jpg” into Database.

I have two forms one new form n one is to edit the form

in new form the image is saving correctly and m getting the full path also of the image but when I edit the image itz giving me prob. as its not getting full path

n m using Mozilla Firefox as browser
Reply
indra wardhana on August 1, 2012 at 1:09 am

nice trick rahul
Reply
jashwanth ch on October 16, 2012 at 1:14 am

Enabling Multiple file Uploads using textfield is not working in IE8.I am getting the following error

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; MS-RTC LM 8; .NET4.0C; .NET4.0E)

Timestamp: Tue, 16 Oct 2012 05:09:41 UTC

Message: Expected identifier, string or number

Line: 28

Char: 9

Code: 0

URI: http://www.rahulsingla.com/sites/default/files/content/blog/ExtJs%203%20-%20multiple%20file%20upload%20field.html

what is solution for this and will this work with EXTJS 4?

pls rply as soon as possible
Reply
jneid on November 9, 2012 at 9:16 am
Hi rahul

please if u can help me as soon as possible

i need to know how to get the files name that i want to upload

im trying
```
var image1 = Ext.getCmp("image1").getValue();
it show me the first image only..i need all image choosen please show me the way

thanks for ur help
```
Reply
Samuel on January 29, 2013 at 11:31 am

Im working on extjs 4.1. I adapt your code to this:

var file2 = Ext.create(‘Ext.Component’, {
autoEl: { tag: ‘input’, type: ‘file’, multiple: ‘multiple’, name: ‘filesToUpload[]’ }
});

It looks great, but doesnt work like fileupload so I can’t get it like a file.
Any suggest?
Reply
Jwala on April 18, 2013 at 4:54 am

same prob. it does not allow me to select multiple files. i am using extjs-4.0. what i should do now?
Reply
Jwala on April 18, 2013 at 4:58 am

i had checked it in mozilla,chrome but unable to select multiple files….& i am not using IE…so guide me for it…
Reply
kiran patro on July 1, 2013 at 5:56 am

Same problem, it does not allow for multiple files. It works only single file though i am using chrome and mozilla browser.
Reply