Skip to content
This repository has been archived by the owner on May 25, 2023. It is now read-only.

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

Closed

Conversation

psmyrdek
Copy link

@psmyrdek psmyrdek commented Jul 20, 2018

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):
image

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

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

psmyrdek and others added 5 commits July 20, 2018 11:47
@psmyrdek psmyrdek changed the title FileSystemEntries doesn't seem to work correctly on Safari 11 File upload doesn't seem to work correctly on Safari 11 Jul 23, 2018
@brenton-vidcorp
Copy link

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

@psmyrdek
Copy link
Author

psmyrdek commented Jul 27, 2018

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
Copy link
Author

psmyrdek commented Aug 9, 2018

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:
image

ghost
ghost approved these changes Aug 14, 2018
ghost pushed a commit to xpressengine/xpressengine that referenced this pull request Aug 14, 2018
- safari에서 dialog에서 선택한 파일을 업로드할 수 없는 문제
- PR 코드로 패치 함 : blueimp/jQuery-File-Upload#3512
ghost pushed a commit to xpressengine/xe-core that referenced this pull request Aug 17, 2018
- safari에서 dialog에서 선택한 파일을 업로드할 수 없는 문제
- PR 코드로 패치 함 : blueimp/jQuery-File-Upload#3512
@kaunio
Copy link

kaunio commented Sep 17, 2018

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-
Copy link

dlt- commented Sep 22, 2018

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
Copy link
Author

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
Copy link

@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.

kijin pushed a commit to kijin/rhymix that referenced this pull request Oct 2, 2018
- safari에서 dialog에서 선택한 파일을 업로드할 수 없는 문제
- PR 코드로 패치 함 : blueimp/jQuery-File-Upload#3512
ghost pushed a commit to xpressengine/xe-core that referenced this pull request Oct 12, 2018
@blueimp
Copy link
Owner

blueimp commented Oct 14, 2018

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.

kijin pushed a commit to rhymix/rhymix that referenced this pull request Oct 18, 2018
@FlorianDr
Copy link

FlorianDr commented Nov 28, 2018

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.

david-hollifield added a commit to david-hollifield/jQuery-File-Upload that referenced this pull request Feb 22, 2019
Added changes from PR described in blueimp#3512 (comment)
@psmyrdek
Copy link
Author

psmyrdek commented Jul 5, 2019

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

@psmyrdek psmyrdek closed this Jul 5, 2019
@mattschuette
Copy link

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
Copy link
Owner

blueimp commented Sep 25, 2021

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants