Upload File with ExtJS

After long 'journey' to find how to make form upload file with ExtJS and PHP, finally i found the simple one. Here is a sample code that i modified from Sencha sample code and i combined with native php code. It's a simple code to understand and perhaps it help you to create upload form with ExtJS and PHP.  I've been tried to used Code Igniter library but it doesn't work, so i used pure php code like below.

ExtJS code : upload.js

Ext.onReady(function(){

    var msg = function(title, msg) {
        Ext.Msg.show({
            title: title,
            msg: msg,
            minWidth: 200,
            modal: true,
            icon: Ext.Msg.INFO,
            buttons: Ext.Msg.OK
        });
    };

    Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        width: 500,
        frame: true,
        title: 'File Upload Form',
        bodyPadding: '10 10 0',

        defaults: {
            anchor: '100%',
            allowBlank: false,
            msgTarget: 'side',
            labelWidth: 50
        },

        items: [{
            xtype: 'fileuploadfield',
            buttonText: 'Browse',
            name: 'form-file',
            id: 'form-file',
            emptyText: 'Select File..',
            fieldLabel: 'Files'
                       
        }],

        buttons: [{
            text: 'Upload',
            handler: function(){
               var form = this.up('form').getForm();
                if(form.isValid()){
                    form.submit({
                        url: 'upload/do_upload',
                        waitMsg: 'Uploading your file...',
                        success: function(form, action) {
                            msg('Message', action.response.responseText);
                        }
                        ,
                        failure: function(form, action) {
                            msg('Message',action.response.responseText);
                        }
                    });
                }
            }
        },{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }]
    });

});

PHP code : upload.php / function do_upload

function do_upload()
        {
           
            $file_name = $_FILES['form-file']['name'];
           
            $source = $_FILES['form-file']['tmp_name'];
           
            $directory = "uploads/$file_name";
           
           
            if( file_exists ($directory )) {
                echo json_encode('File '. $file_name . ' already exist!');
                exit();
             }
               else {
                echo json_encode('Upload '.$file_name . ' success!');
                move_uploaded_file($source,$directory );
            }
           
         }



related links:

Upload File Sencha

Upload File with php ( www.ilmukomputer.net )

How to show PDF files in ExtJS