CODEWITHSUNDEEP
extjs
brindha
brindha

Reputation: 313

file upload using EXT JS

Steps to create File Upload field using Ext Js

Upvotes: 28

Views: 88991

Answers (4)

khmurach
khmurach

Reputation: 484

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

Upvotes: -1

Chau
Chau

Reputation: 5570

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.

Upvotes: 7

tom
tom

Reputation: 246

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.

Upvotes: 0

SW4
SW4

Reputation: 71150

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!

Upvotes: 27

Related Questions