File upload doesn't seem to work correctly on Safari 11

[psmyrdek]

I created this PR to start a discussion about reading files from file input. There are situations, where upload using Safari 11 fails, because of the data provided by function _getSingleFileInputFiles.

I'm debugging minified version of my app on remote env (on local env everything works file) and, as you can see below, _onAdd function is being called with a single file, instead of array of files (property called files):

As a result, further execution of this function if being canceled because _onAdd expects to see array - otherwise, upload fails:

More detailed description of this issue can be found here - https://stackoverflow.com/questions/49918319/jquery-file-upload-cannot-upload-file-in-safari-11

[brenton-vidcorp]

I would just like to confirm that this does fix the problem. Also still working on older Safari versions.
Thanks @psmyrdek

[psmyrdek]

I'm glad to hear that. Unfortunately I can't reproduce this issue neither on https://blueimp.github.io/jQuery-File-Upload/ nor using test suite provided with the package. Would be nice to fix the root cause.

[psmyrdek]

I also decided to remove FileSystemEntry-related calls in _getSingleFileInputFiles. Don't you think it's too unstable to use it?

Even MDN is recommending avoiding this feature at this given moment:

[kaunio]

I'm glad to hear that. Unfortunately I can't reproduce this issue neither on https://blueimp.github.io/jQuery-File-Upload/ nor using test suite provided with the package. Would be nice to fix the root cause.

I can reproduce it on the upload test url (above). The main issue somehow seems like using non US-ASCII characters in the directory path causes some issues. The filename itself seems to work with non US-characters.

How I reproduce it using Browserstack

1. Start a session with High Sierra and Safari 11
2. Goto https://blueimp.github.io/jQuery-File-Upload/index.html
3. Click the Upload button. Inside the file picker I rename the Browserstack directory "images" to "imagesä"
4. Pick any file in the directory (chart1.png)

The web page now displays "NotFoundError" - File type not allowed.
Renamed the directory back to images and redoing the workflow allows the upload.

[dlt-]

I noticed this earlier this year and also filed a bug report to Apple. They have not fixed it yet. Have had no time to test with Safari 12.

The issue seems to be with Drag-and-drop upload when source directory contains non-ascii characters (Finnish Ä ö etc , for example). WHen files are selected from "select files" dialog there are no issues.

I fixed it by adding the following dirty hack to jquery.fileupload.js:

 _getSingleFileInputFiles: function (fileInput) {
            fileInput = $(fileInput);
            var entries = fileInput.prop('webkitEntries') ||
                    fileInput.prop('entries'),
                files,
                value;

// Safari 11 non-ascii char fix 
            if (navigator.userAgent.indexOf('Safari/601.1.15')!=-1 && entries && entries.length) {
                return this._handleFileTreeEntries(entries); 									
            } 																	
//
            files = $.makeArray(fileInput.prop('files'));
            if (!files.length) {
                value = fileInput.prop('value');
...

[psmyrdek]

Are we sure that we're not mixing two different issues? One related to invalid chars in name, and another one related to something else (original question). As you see on my screenshots, even files like cv.docx in totally valid directories cannot be uploaded in some cases.

[brenton-vidcorp]

@psmyrdek I think there is two issue being mixed up, but the fix does apply to both of them.

I've also recently seen that using drag&drop features on chrome began to fail, but is also fixed by this same fix.

[blueimp]

Sorry that I'm very late to address this issue, especially since @psmyrdek made a lot of effort to notify me by different means.

Unfortunately I was not able to reproduce this with the current version of Safari (12) on the latest MacOS (10.14).

Given @psmyrdek's comment here, has anyone been able to reproduce this on the demo?

I'm glad to hear that. Unfortunately I can't reproduce this issue neither on https://blueimp.github.io/jQuery-File-Upload/ nor using test suite provided with the package. Would be nice to fix the root cause.

The demo always runs the latest version of the project using the sample Go backend.
So if it's not reproducible on the demo, it might point to a server-side issue.

[FlorianDr]

I'm facing a related issue. I use the same instance of file-upload to upload multiple files. When I upload file A and upload file B afterwards, the webkitEntries of _getSingleFileInputFiles still holds file A. Therefore I'm uploading file A twice. I have to say that I use the option { replaceFileInput: false }.

I see other issues with webkitEntries like https://stackoverflow.com/questions/49918319/jquery-file-upload-cannot-upload-file-in-safari-11

Therefore, I agree with @psmyrdek to remove that part.

[psmyrdek]

Since I moved away from this issue I think it's time to close it.

[mattschuette]

I know this is closed, but I spent a week of my life chasing this down. We are doing almost the same exact thing @FlorianDr described, albeit via the jquery.cloudinary library. Notably, we are using the default replaceFileInput: true. This remains an issue in Safari 14.1.1. It seems like webkitEntries isn't being updated on subsequent file browsing, though drag and drop does work. No amount of input resetting or form clearing helps, I edited jquery.fileupload.js and commented out the webkitEntries check and call to _handleFileTreeEntries inside _getSingleFileInputFiles.

[blueimp]

I've merged a pull request that removes webkitEntries.
Will release a new version shortly.