File upload widget for Ext JS

Features

• flexible and easily integratable
• uses the native File API (HTML5)
• allows selecting and uploading of multiple files at once
• supports both raw PUT/POST upload and multipart upload
• you can easily write and integrate your own upload mechanism, while preserving all (or most) of the UI functionality
• displays upload progress
• supports asynchronous (simultaneous) upload

Online demo

• Demo included in this repository

Requirements

• Sencha Ext JS 4.x or 5.x
• browser supporting the File API - see more info about browser compatibility
• server side to process the uploaded files

Installation

Clone the repository somewhere on your system and add the path with the prefix to Ext.Loader:

Ext.Loader.setPath({
    'Ext.ux.upload' : '/my/path/to/extjs-upload-widget/lib/upload'
});

Basic usage

In the most simple case, you can just open the dialog and pass the uploadUrl paramter:

var dialog = Ext.create('Ext.ux.upload.Dialog', {
    dialogTitle: 'My Upload Widget',
    uploadUrl: 'upload.php'
});

dialog.show();

Ext.ux.upload.Dialog is just a simple wrapper window. The core functionality is implemented in the Ext.uz.upload.Panel object, so you can implement your own dialog and pass the panel:

var myDialog = Ext.create('MyDialog', {
    items: [
        Ext.create('Ext.ux.upload.Panel', {
            uploadUrl: 'upload.php'
        });
    ]
});

Uploaders

The intention behind the uploaders implementation is to have the upload process decoupled from the UI as much as possible. This allows us to create alternative uploader implementations to serve our use case and at the same time, we don't need to touch the UI.

Currently, these uploaders are implemented:

• ExtJsUploader (default) - uploads the file by sending the raw file data in the body of a XmlHttpRequest. File metadata are sent through request HTTP headers. Actually, the standard Ext.data.Connection object is used with a small tweak to allow progress reporting.
• FormDataUploader - uploads the file through a XmlHttpRequest as if it was submitted with a form.

Each uploader requires different processing at the backend side. Check the public/upload.php file for the ExtJsUploader and the public/upload_multipart.php for the FormDataUploader.

Advanced usage

The default uploader is the ExtJsUploader. If you want to use an alternative uploader, you need to pass the uploader class name to the upload panel:

var panel = Ext.create('Ext.ux.upload.Panel', {
    uploader: 'Ext.ux.upload.uploader.FormDataUploader',
    uploaderOptions: {
        url: 'upload_multipart.php',
        timeout: 120*1000
    }
});

Or you can pass the uploader instance:

var panel = Ext.create('Ext.ux.upload.Panel', {
    uploader: Ext.create('Ext.ux.upload.uploader.FormDataUploader', {
        url: 'upload_multipart.php',
        timeout: 120*1000
    });
});

Adding Drag&Drop Support

var dialog = Ext.create('Ext.ux.upload.Dialog', {
    dialogTitle: 'My Drag&Drop Upload Widget',
    uploadUrl: 'upload.php',
    listeners: {
        show: function(me, eOpts) {

            var self = Ext.get(me.id),
                queue = self.component.panel.queue,
                gridview = self.component.panel.grid.getView();

            gridview.emptyText = '<div class="x-grid-empty">Add files simply by dragging and dropping in here</div>';
            gridview.refresh();

            queue.on('queuechange', function(me) {
                gridview.refresh();
            });

            function cancel(e) {
                e.stopPropagation && e.stopPropagation();
                e.preventDefault && e.preventDefault();
            }

            function addEventHandler(obj, evt, handler) {
                if (obj.addEventListener)
                {// W3C method
                    obj.addEventListener(evt, handler, false);
                }
                else if (obj.attachEvent)
                {// IE method
                    obj.attachEvent('on' + evt, handler);
                }
                else
                {// old school method
                    obj['on' + evt] = handler;
                }
            }

            addEventHandler(self.dom, 'dragover', cancel);
            addEventHandler(self.dom, 'dragenter', cancel);
            addEventHandler(self.dom, 'drop', function(e) {
                cancel.call(this, e);

                self.component.panel.queue.addFiles(e.dataTransfer.files);

                return false;
            });

        }
    }
});

Running the example

Requirements:

• web server with PHP support
• Ext JS v4.x or v5.x instance

Clone the repository and make the public directory accessible through your web server. Open the public/_config.php file and set the upload_dir option to point to a directory the web server can write to. If you just want to test the upload process and you don't really want to save the uploaded files, you can set the fake option to true and no files will be written to the disk.

The example index.html expects to find the Ext JS instance in the public/extjs directory. You can create a link to the instance or copy it there.

Documentation

• API Docs

Other links

• More info in the blogpost
• Sencha forums post

TODO

• add more uploader implementations
• add drag'n'drop support
• improve documentation

License

• BSD 3 Clause

Author

• Ivan Novakov