file upload using EXT JS

Question

Steps to create File Upload field using Ext Js

Answer 1

As far as specific steps are concerned, using functionality supported in ExtJS 3x, your best best is to use this module/plugin:

http://dev.sencha.com/deploy/dev/examples/form/file-upload.html

The core script comes with the Ext JS package, in your main HTML file (where you have linked to the core Ext scripts), in the head section after your other scripts put:

<script type="text/javascript" src="nameofyourextfolder/examples/ux/fileuploadfield/FileUploadField.js"></script>

Sadly, there isnt a huge amount of documentation on this element of Ext JS- however for basic functionality, you can create a form with an async upload field using the below:

            myuploadform= new Ext.FormPanel({
                fileUpload: true,
                width: 500,
                autoHeight: true,
                bodyStyle: 'padding: 10px 10px 10px 10px;',
                labelWidth: 50,
                defaults: {
                    anchor: '95%',
                    allowBlank: false,
                    msgTarget: 'side'
                },
                items:[
                {
                    xtype: 'fileuploadfield',
                    id: 'filedata',
                    emptyText: 'Select a document to upload...',
                    fieldLabel: 'File',
                    buttonText: 'Browse'
                }],
                buttons: [{
                    text: 'Upload',
                    handler: function(){
                        if(myuploadform.getForm().isValid()){
                            form_action=1;
                            myuploadform.getForm().submit({
                                url: 'handleupload.php',
                                waitMsg: 'Uploading file...',
                                success: function(form,action){
                                    msg('Success', 'Processed file on the server');
                                }
                            });
                        }
                    }
                }]
            })

What this code will do is create a new formpanel with an upload field and an upload button. When you click the upload button- the selected file will be sent to the serverside script handleupload.php (or whatever you call it). It is then this script that handles what you want to do with the file. An example of this could potentially be:

    $fileName = $_FILES['filedata']['name'];
    $tmpName  = $_FILES['filedata']['tmp_name'];
    $fileSize = $_FILES['filedata']['size'];
    $fileType = $_FILES['filedata']['type'];
    $fp      = fopen($tmpName, 'r');
    $content = fread($fp, filesize($tmpName));
    $content = addslashes($content);
    fclose($fp);
    if(!get_magic_quotes_gpc()){
        $fileName = addslashes($fileName);
    }
    $query = "INSERT INTO yourdatabasetable (`name`, `size`, `type`, `file`) VALUES ('".$fileName."','".$fileSize."', '".$fileType."', '".$content."')";
    mysql_query($query); 

Which would inject the file into a SQL DB. The thing to remember is the server side file handles an upload just as a normal HTML form would...

Hope this helps!

Answer 2

If you look at the examples available at www.ExtJS.com, you'll find this one.

Although it is based on the standard HTML file upload - just like this answer suggests.

Answer 3

setting the id only will result in the $_FILES array name to be the same as the id. If you need to use something else then set the name config option and it will use that instead.

Answer 4

items: {
    xtype: 'form',
    border: false,
    bodyStyle: {
        padding: '10px'
    },
    items: {
        xtype: 'multifilefield',
        labelWidth: 80,
        fieldLabel: 'Choose file(s)',
        anchor: '100%',
        allowBlank: false,
        margin: 0
    }
},

Live demo for ExtJS 4.2.2 is here