1. #1
    Sencha Premium Member
    Join Date
    Oct 2010
    Posts
    9
    Vote Rating
    0
    maciasoft is on a distinguished road

      0  

    Default HTML5 File upload ProgressBar

    HTML5 File upload ProgressBar


    Hi, recently I developed an extension for Ext.data.Connection to enable tracking of file upload progress. The code is compatibile with browsers that don't support it as well. Upload is acomplished using AJAX techniques rather hidden iframe. All you need to do is Ext.require code below and benefit!
    Code:
    /**
     * HTML 5 File upload ProgressBar. This code introduces ability to monitor file upload progress in forms.
     * It provides the progress method to form action configuration for progress monitoring. Implementation is also
     * backward compatibile with browsers that do not implement the Html 5 File API. In such case the progress method
     * is just not going to be invoked.
     * 
     * Usage:
     * 
        Ext.Msg.wait("Uploading", "Your file is being uploaded")
        form.submit({
            url: '/upload',
            success: function() {
                Ext.Msg.alert('Success', 'Your file has been uploaded.');
            },
            //progress is [0..1], and event is the underlying HTML 5 progress event.
            progress: function(action, progress, event) {
                Ext.Msg.updateProgress(progress)
            }
        })
     * @overrides Ext.data.Connection
     * @author Maciej Szajna
     */
    Ext.define('Ext.ux.data.Html5Connection', {
        override: 'Ext.data.Connection',
        
        /**
         * Override the Accept header to accept text/html. This is for compatibility if you want to support browsers
         * without Html 5 File API implemented. In such case your backend server needs to respond with text/html for
         * iframe to accept it. Then this implementation must accept text/html as well.
         * @cfg {Boolean} overrideAccept
         */
        overrideAccept: true,
        
        /**
         * Checks whether Html 5 File API is supported
         */
        isHtml5Supported: function() {return typeof FileReader != "undefined"},
        
        /**
         * If File API is supported, then do not treat upload forms specially.
         */
        isFormUpload: function(options) {
            return !this.isHtml5Supported() && this.callParent(arguments)
        },
        
        /**
         * Construction of FormData object.
         */
        setOptions: function(options, scope) {
            var opts = this.callParent(arguments)
            if (this.isHtml5Supported() && options.isUpload && options.form) {
                opts.data = new FormData(options.form)
            }
            return opts
        },
        
        /**
         * Registration of progress handler
         * @private
         */
        openRequest: function(options,  requestOptions, async, username, password) {
            var me = this
            var xhr = this.callParent(arguments)
            if (options.isUpload && options.progress) {
                xhr.upload.onprogress = options.progress
            }
            return xhr
        },
        
        /**
         * Fix for text/html Accept header for backward compatibility.
         * @private
         */
        setupHeaders: function(xhr, options, data, params) {
            var acceptHeader = "Accept"
            if (this.overrideAccept && options.isUpload) {
                if (!options.headers) options.headers = {}
                options.headers[acceptHeader] = "text/html"
            }
            return this.callParent(arguments)
        }
    })
    
    
    /**
     * Passes progress callback to the Connection object.
     */
    Ext.define('Ext.ux.form.action.Action', {
        override: 'Ext.form.action.Action',
        createCallback: function() {
            var me = this
            var callback = this.callParent()
            callback.progress = function(e) {
                var prog = e.loaded / e.total
                Ext.callback(me.progress, me.scope || me, [me, prog, e])
            }
            return callback
        }
    })
    The code is not the cleanest, especially the Action.createCallback override, but easiest to implement and use. What it does is override Ext.data.Connection and Ext.form.action.Action to add the progress event, and handle file submission via XMLHttpRequest.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the contribution.

    Scott.

  3. #3
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    303
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    A live demo will be appreciated a lot to play with it..
    Thanks..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    24
    Vote Rating
    0
    lightyear416 is an unknown quantity at this point

      0  

    Default


    What a nice job! Thanks.Can you take a example that monitor the upload data in file upload progress without swf and use ProgressBar to show the percent.When I use the C#+ExtJs,I find it hard to acquire upload data segment in upload progress.Can you help me?Thanks!

  5. #5
    Sencha Premium Member
    Join Date
    Oct 2010
    Posts
    9
    Vote Rating
    0
    maciasoft is on a distinguished road

      0  

    Default


    I did try to create a nice example, but failed, bacause you need a true upload server for the HTML5 upload tracking to work. But as described in first post, usage is as simple as pasting the code in your initialization logic (before onReady or Ext.application) and implementing the "progress" handler in your form.submit configuration (a sample implementation given in the first post).

  6. #6
    Sencha User
    Join Date
    Jun 2011
    Posts
    24
    Vote Rating
    0
    lightyear416 is an unknown quantity at this point

      0  

    Default


    Ye,I did agree with you.I have try serial methods to do that without swf but fail too.I saw the idea of ExtJs Dev Team member that it hard to do because of limit of browser.However,We do something try!I think that's the real differents.