ExtJs 3 - Enabling multiple file uploads using TextField

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:

 

 

Comments

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

rahul's picture

Hi sam, please read this:
http://www.rahulsingla.com/chit-chat/2010/07/general-help-and-support

I normally do not reply to comments unrelated to blog posts. The only thing I can advise here is to use Ext layouts to design your forms and windows. With some intelligent use of available layouts, you should be able to achieve any desired design while inheriting the built-in functionality to adapt to screen resolutions from the layouts.

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"

rahul's picture

Hi Pooja, returning path is upto the browser and they might not return you full paths depending upon their security models. e.g. Chrome returns something like "C:\fakepath\filename" instead of the actual file path. Even if you have the complete path (which I think IE returns), you won't be able to do anything with it in javascript or in your server-side code (you cannot access local file system either in javascript or server-side). So I am not sure having the complete path would be that useful.

Most of the time in my experience, what I usually need is the file extension of the uploaded file and its contents which are available server-side when the form is submitted (extension can be extracted from the file name even if it does not contain the full path as you can see).

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

rahul's picture

Hi Pooja, please read this:
http://www.rahulsingla.com/chit-chat/2010/07/general-help-and-support

Any further question would not elicit a reply as the questions are not related to the blog post. All I have to say is web applications cannot be used to manage file-systems of client machines (but they can be used to manage file systems of server machines).
You need to evaluate your requirements and need to see if traditional Desktop applications would fit better for you. 

nice trick rahul

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...

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

pls rply as soon as possible 

rahul's picture

Hi Jaswanth, I don't think IE 8 supports multiplt="multiple" attribute. I believe the sample code would need some changes for ExtJs 4 (like using autoEl instead of autoCreate).

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
rahul's picture

Well jenid, I haven't tried this myself (and running too tight to be able to test myself). This might be browser specific too.

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?

rahul's picture

Hi Samuel, the following works for me for Ext 4.1.x:

 

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

 

Thx but that doesnt allow me to select multiple files when i opened the "Choose file" button

rahul's picture

Please see if your borwser supports it (specifically check you are not using an outdated version of IE).

same prob. it does not allow me to select multiple files. i am using extjs-4.1.1. any help?

rahul's picture

Hi sayali, the code in this comment was checked with Ext 4.x before being posted. Please see if your browser supports multiple file selection for a single input field

same prob. it does not allow me to select multiple files. i am using extjs-4.0. what i should do now?

i had checked it in mozilla,chrome but unable to select multiple files....& i am not using IE...so guide me for it...

rahul's picture

Hi Jwala, like I said, the code posted earlier was tested with Ext 4 and Chrome, can you please post the code you are using?

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

rahul's picture

Not sure why it doesn't work for you guys, I just re-checked in Chrome and works for me.