upload plug-in doesn't show the progress in xx%, but only 100%

Frank Yu

It's still the upload plug-in problem. Is there anything I'm missing to show the upload progress in the page. I can upload the file but can only see the 100% in the button, but cannot see 10%, 20%...90%..etc. The following is my codes.

function uploadFile ( editor, conf, file ){
    var data = new FormData();
    var ajax;
    var guid = editor.s.fields.guid.s.opts._val;

    data.append( 'action', 'upload' );
    data.append( 'uploadField', conf.name );
    data.append( 'upload', file );
    data.append( 'guid', guid );

    if ( typeof editor.s.ajax !== 'string' && ! conf.ajax ) {
        throw 'No Ajax option specified for upload plug-in';
    } else if ( conf.ajax ) {
        ajax = conf.ajax;
    } else {
        ajax = editor.s.ajax;
    }

    if ( typeof ajax === 'string' ) {
        ajax = { url: ajax };
    }

    // Use preSubmit to stop form submission during an upload, since the
    // value won't be known until that point.
    var submit = false;
    editor
        .on( 'preSubmit.DTE_Upload', function () {
            submit = true;
            return false;
        } );

    $.ajax( $.extend( ajax, {
        type: 'post',
      //  url: 'ajax/filesupload_json.php',   //url在editor時就有定義了 會直接帶進來
        data: data,
        async: true,
        cache: false,
        dataType: 'json',
        contentType: false,
        processData: false,
        xhr: function() {
                var xhr = $.ajaxSettings.xhr();
                //绑定上传进度的回调函数
                xhr.upload.addEventListener('progress', progress, false);
                return xhr;//一定要返回，不然jQ没有XHR对象用了
            },
        xhrFields: {
            onsendstart: function() {
                        //this是指向XHR
                        this.upload.addEventListener('progress', progress, false);
                    },
            onprogress: function ( e ) {
                if ( e.lengthComputable ) {
                    var percent =(e.loaded / e.total *100|0)+"%";
                    buttonText( conf, percent );
                }
            },
            onloadend: function ( e ) {
               // buttonText( conf );
            }
        },
        success: function ( json ) {
            editor.off( 'preSubmit.DTE_Upload' );
            $.fn.dataTable.Editor.fieldTypes.upload.set.call( editor, conf, json.upload.id, json.upload.row );

            if ( submit ) {
                editor.submit();
            }
        }
    } ) );
};

function buttonText ( conf, text ){
    if ( text === null || text === undefined ) {
        text = conf.uploadText || "Choose file...";
    }
    conf._input.find('div.upload button').text( text );
};

Frank Yu

I've replace the xhrFields with the following and it's working very well:

removed codes:

xhr: function() {                var xhr = $.ajaxSettings.xhr();                //绑定上传进度的回调函数                xhr.upload.addEventListener('progress', progress, false);                return xhr;//一定要返回，不然jQ没有XHR对象用了            },        xhrFields: {            onsendstart: function() {                        //this是指向XHR                        this.upload.addEventListener('progress', progress, false);                    },            onprogress: function ( e ) {                if ( e.lengthComputable ) {                    var percent =(e.loaded / e.total *100|0)+"%";                    buttonText( conf, percent );                }            },            onloadend: function ( e ) {               // buttonText( conf );            }        },

new codes:

xhr: function () {
            var xhr = $.ajaxSettings.xhr();
            xhr.onprogress = function e() {
                // For downloads
                if (e.lengthComputable) {
                    buttonText(conf,(e.loaded / e.total *100|0)+"%");
                }
            };
            xhr.upload.onprogress = function (e) {
                // For uploads
                if (e.lengthComputable) {
                    buttonText(conf, (e.loaded / e.total *100|0)+"%");
                }
            };
            return xhr;
        },

allan

Good to hear you got it working in your setup.

Allan