Using Default Extjs Ux File Input

You need to include these two files on your Extjs application, they are the js file in folder “examples\ux\fileuploadfield\FileUploadField.js” and the css file in folder “examples\ux\fileuploadfield\css\fileuploadfield.css”, then you can add field on the FormPanel with xtype “fileuploadfield” and add config “name” (this will processed by server) for example in my formpanel

var form1 = new Ext.FormPanel({
    title: 'Multiple Upload With Default Uploader',
    renderTo: 'div-form-1', width: 320, buttonAlign: 'center',
    frame: true, fileUpload: true, style: 'margin: 0 auto;',
    items: [{
        xtype: 'fileuploadfield',
        emptyText: '',
        fieldLabel: 'File 1',
        buttonText: 'Select a File',
        name: 'ufile[]',
        id: 'form-file-1'
    }, {
        xtype: 'fileuploadfield',
        emptyText: '',
        fieldLabel: 'File 2',
        buttonText: 'Select a File',
        name: 'ufile[]',
        id: 'form-file-2'
    }, {
        xtype: 'fileuploadfield',
        emptyText: '',
        fieldLabel: 'File 3',
        buttonText: 'Select a File',
        name: 'ufile[]',
        id: 'form-file-3'
    }],
    buttons: [{
        text: 'Save',
        handler: function() {
            form1.getForm().submit({
                url: 'upload.php',
                waitMsg: 'Sending Data',
                success: function(form, o) {
                    alert(o.response.responseText);
                }
            });
        }
    }, {
        text: 'Reset',
        handler: function() {
            form1.getForm().reset();
        }
    }]
});

Now you can see those are very simple and to make multiple upload just use same name config on each file input and use the square bracket, server scripting will treated as an array, and on upload.php file you can use simple php file like this (and is up to you how server validate the file)

<?php

@move_uploaded_file($_FILES['ufile']['tmp_name'][0],
        'uploads/'.$_FILES['ufile']['name'][0]);
@move_uploaded_file($_FILES['ufile']['tmp_name'][1],
        'uploads/'.$_FILES['ufile']['name'][1]);
@move_uploaded_file($_FILES['ufile']['tmp_name'][2],
        'uploads/'.$_FILES['ufile']['name'][2]);

echo '{"success":true}';

?>

Using Extjs Awesome Uploader Extension

First download the file from this jsjoy.com blog you can find the download link at the end of the post, and I won’t tell in a detail post cause that blog have already quite good detail, here’s only what I can tell.

When you download and extract the file it generated many file these file have to be included in your Extjs application to make this work, they are Ext.ux.form.FileUploadField.js, Ext.ux.XHRUpload.js, swfupload.js, swfupload.swfobject.js, and AwesomeUploader.js. These plugins require flash player and support multiple file and drag and drop file uplader from your desktop, it is cool isn’t, but the missing things from this extension (when I try this on my localhost), is the file is always automatic upload, I cannot find the configuration to turn off the automatic upload, and the last word I suggest you read all the config option that avaliable.

And I have tried on my localhost server see the screenshot below

Visit Awesome Uploader | Download Source

Other Resource

http://www.aariadne.com/uploadform/ it is the older 3rd party plugin file uploader, very nice interface but I cannot find the download link to this file, and hope the author continue this great work.