File upload "not working" when trying to upload empty files on ie10+ (with a work-around)

[spaquin]

First off; would like to say Great job on a very complex piece of code. :)
That being said; I've been using the JQuery FileUpload for more than 1 year now, implementing it in a pretty custom fashion in my own app, based on the JQuery branch.
I've been through all the code, I've heavily customized the phpUploadHandler to my own taste (to my great satisfaction), and I think I managed a good job with the callbacks, everything is dandy. Except for one tiny issue which just now popped up.

Looks like my custom setup, AND the demo contain the same bug, I've upgraded to the latest version, (9.5.6) hoping it would fix it, but alas. No. So I actually worked around it, implementing a rather nasty hack in one of the callbacks (code snippet to follow).

How to reproduce the bug
try to upload an empty text file using IE 10+. It is more obvious if you upload an image along with the empty text file, you will notice how the progress bar stays stuck on 99%. Only affects IE (11?) as far as I can tell, on Windows8.1. I still have to get my hands on other IE variants to properly test. Works with any vanilla demo.
On Firefox it works fine, the upload is "processed" and the UploadHandler receives an empty file. But on IE, the file doesn't upload at all, the progress bar stays in an indefinite state, and well.... it looks like its stuck (to a normal user...).

So in my haste, I made a nasty hack to homogenize the processing between IE and FF;
(Keep in mind that I disable the auto-upload feature, rather I let the user stack the files, then he can individually start files, or use the header start button to start the whole queue of files, but the "bug" is there whether or not automatic uploads is enabled.).

    $('#fileupload').bind('fileuploadsubmit', function (e, data) {
        try{console.log('fileuploadsubmit callback')}catch(e){}
        var inputs = data.context.find('#file_comments');
        var status = data.context.find('.status');
        status.html( '<span class="ui-icon ui-icon-arrowreturnthick-1-n" style="float: left; margin-right: .3em;"></span>' + 'uploading...' )

        /* our way of doing it so we can pass individual comments per file */
        var fileFields2=fileFields.add( inputs );
        data.formData = fileFields2.serializeArray();

        /**
         * On IE, seems we have a tiny problem with empty files at this point.
         * Attemting to detect from our environment if the file is empty to
         * short-circuit this bug in IE...
         * data.files[0].size !!!
         **/
        var return_status=true;
        $.each(data.files, function(index,file){
            if ( ! file.size ) {
                alert('The file '+file.name+' is empty !');

                /**
                 * Attempt to clean-up the interface, or remove the file from the list.
                 *
                 **/
                var status = data.context.find('.status');
                status.html( '<span class="ui-icon ui-icon-arrowreturnthick-1-n" style="float: left; margin-right: .3em;"></span>' + 'File looks empty' )

                file.error='Empty file';
      /* js code to log errors on my server */
                Report_Client_Error(null, "Visitor attempted to send an empty file name :"+file.name, 0, "Visitor attempted to send an empty file name :"+file.name,null,1,"step2.php",data,null);

            }
        });

        return return_status;
    }); 

I'm not super-clear on why I commented out the false return_status (something I forgot after testing perhaps? or the system behaved better with a true end result, not sure... argh.) But using this method, in my situation I can at least inform all the users they're attempting to upload an empty file, leave the file in the listing (with an updated status of empty file), and leave it up to the client to cancel and try again. Effectively, the fileuploadsend/done doesn't get processed at all this way.

That seems to be the bug, as far as I can debug it myself. In IE, fileuploadsubmit doesn't get called, but in FF, it does even on empty files. But using the above hack, now all browsers stop short of the fileuploadsubmit, on empty files of course. :)

Ah ! And here's how I initialize the FileUpload widget...
(just noticed I wasn't using a min-filesize... would it matter ?)

    $('#fileupload').fileupload({
        maxChunkSize: 1024 * 256,
        maxRetries: 15,
        retryTimeout: 1000,
        multipart: true,
        url: '<?=$FILEMANAGER_UPHANDLER?>',
        dataType: 'json',
        autoUpload: false,
        replaceFileInput: true,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|pdf|psd|doc|docx|xls|xlsx|pda|tiff?|gzip|zip|tar|tgz|sql|db|te?xt|eps|mp3|m3u)$/i,
        maxFileSize: 2147483648, // 2GB
        loadImageMaxFileSize: 15000000, // 15MB
        disableImageResize: false,
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true,

        always: function (e, data) {
        //  numFiles_inProcess=numFiles_inProcess-1;
            try{console.log('always callback')}catch(e){}

        }
    });

[blueimp]

Thanks and interesting find! :)

This is actually a bug in IE10/IE11, which fails to upload empty file objects via XHR (although the files are even wrapped in a FormData object) and just stays in pending state indefinitely.

As a workaround, I would set the minFileSize option to 1 or more bytes and provide users another means of creating empty files on the server.

[spaquin]

Ah ! Yes, your minFileSize trick works well for FF/IE10/IE11, but not
for IE9, it stays "stuck" on processing with an empty file if
minFileSize is set to 1. That is, using the JQuery demo, v9.5.6.

Stephane Paquin

On 2014-03-13 5:22 PM, Sebastian Tschan wrote:

Thanks and interesting find! :)

This is actually a bug in IE10/IE11, which fails to upload empty file
objects via XHR (although the files are even wrapped in a FormData
object) and just stays in pending state indefinitely.

As a workaround, I would set the |minFileSize| option to 1 or more
bytes and provide users another means of creating empty files on the
server.

—
Reply to this email directly or view it on GitHub
#3032 (comment).