Chrome uploading image no longer works; other browsers are fine

Question

We recently implemented the ability of our members to upload an image. It has worked fine for several months. Recently it has stopped working in Chrome, but continues to work in Firefox, Safari, and Internet Explorer.

The error message that Chrome is generating is as follows:

Uncaught TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

The code section that is having the problem is as follows:

    $(window).load(function()
    {
        var aFiletypesAllowed = ["png","gif","jpeg","jpg"];
        var FileTypesPrintable = 'png, gif, jpeg, jpg"';
        var form = document.getElementById('image-submit');
        var options =
        {
            thumbBox: '.thumbBox',
            imgSrc: ''
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function()
        {
            var reader = new FileReader();
            reader.onload = function(e)
            {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
            fileSize = this.files[0].size;
            fileName = this.value;
        })
        $('#btnCrop').on('click', function()
        {
            //file validation
            var filetype = fileName.split('.').pop().toLowerCase();
            fileWidth = cropper.getWidth();
            fileHeight = cropper.getHeight();

            //check file type
            if (aFiletypesAllowed.indexOf(filetype) < 0)
            {
                var filenameUsed = fileName.split('\\').pop();
                jConfirm('Invalid Filetype', filenameUsed + ' is not an allowed file type. Allowed filetypes are ' + FileTypesPrintable, '', '', '', '', '', '', '', '', 180);
                document.getElementById('file').value = '';
            }
            //check image dimensions -- at least one dimension must be over the limit to ensure a crop occurs, and the image is modified in some way
            else if (fileWidth < 200 && fileHeight < 200)
            {
                jConfirm('Image too Small', 'Minimum allowed image size is 200 x 200. Your image is ' + fileWidth + ' x ' + fileHeight + '. Please choose a larger image.', '', '', '', '', '', '', '', '', 180);
                document.getElementById('file').value = '';
            }
            //validation passed, perform crop
            else
            {
                var img = cropper.getDataURL();
                $('.cropped').html('<img id="cropped-img" src="'+img+'">'); //image to display
                $('#cropped-to-send').val(img); //dataURL to upload
            }
        })

The error message appears to be generated by the line of code "this.files = [];". After that error occurs, another error is thrown by line "var filetype = fileName.split('.').pop().toLowerCase();". The error on that line is "fileName is not defined".

As stated above, this function ran fine for several months in Chrome, and continues to work fine in Firefox, Safari and Internet Explorer.

*"we recently implemented"* doesn't tell us much about how ... where's the code that throws the error? — charlietfl, Mar 25 '16 at 17:03
i've got same problem :"Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'. — hoanganh17b, Mar 27 '16 at 09:57

score 0 · Accepted Answer · answered Apr 07 '16 at 00:00

I don't really understand how this function works, because it was implemented by another programmer based on a library. However, while inspecting the code, the one line "this.files = [];" seems to be problematic. That initializes an empty array; then the next two lines attempt to access elements of that array for later use. Of course, they will be empty.

So on a hunch, I re-arranged the order of some of the lines. The lines from the above code are as follows:

 reader.readAsDataURL(this.files[0]);
 this.files = [];
 fileSize = this.files[0].size;
 fileName = this.value;

I re-arranged them as follows:

reader.readAsDataURL(this.files[0]);
fileSize = this.files[0].size;
fileName = this.value;
this.files = [];

To me the function of these lines is as follows:

perform the data read;
assign some values
set this.files to an empty array

After doing this, the function now appears to work properly in Chrome.

My question now is more like: why was it working at all before in any browser? It seems that clearing the array, then trying to use the array is doomed.

And the second mystery is why did it work for several months? I have verified that this particular code has not changed in that period.

score 0 · Answer 2 · answered Apr 10 '16 at 09:53

0

I had similar problem. Removing the line this.files = []; seams to fix the error, and since reader.readAsDataURL(this.files[0]); has already been called I don't think it will cause any much harm to the file upload. I think the error occurs because it expects a value of type FileList but does not match []

answered Apr 10 '16 at 09:53

Emmanuel

21
2

As I said in my answer, clearing the array before using its values is in fact the problem. So we agree. The developer said he clears it because that prevents the value from showing up on a screen later in an unwanted way. – Jeffrey Simon Apr 11 '16 at 14:44

Chrome uploading image no longer works; other browsers are fine

2 Answers2