search

GoogleChromeLabs / browser-fs-access

File System Access API with legacy fallback in the browser
https://googlechromelabs.github.io/browser-fs-access/demo/
Apache License 2.0
1.37k stars 82 forks source link

Safari doesn't fire 'change' event when fileOpen is called #107

Closed tmcw closed 2 years ago

tmcw commented 2 years ago

Testing the demo https://browser-fs-access.glitch.me on Safari Version 15.4 (17613.1.17.1.13), I can see that the browser does not consistently resolve the promise for fileOpen and sometimes simply doesn't return a file.

tomayac commented 2 years ago

I believe this has to do with HEIC images. It works reliably when I go the "Choose Files" route, but fails if I go the "Photo Library" or "Take Photo" route, presumably because it tries to open HEIC images, which are not supported. Can you reproduce the same results?

jesben commented 2 years ago

Awesome lib, I really want to use it, but my users is iOS Safari PWA users. "Can i use" says green for "File System Access API" on iOS Safari 15.4, but the demo says "Using the fallback implementation" both for Safari and Chrome?

File browse, choose from photo gallery and take photo works in Chrome on iOS 15.4.1, but in Safari on iOS 15.4.1 it does not work, only file browse, selected photos from gallery and take photo do not return? I thought that all browsers in iOS are forced to use the same engine webkit under the hood, so why do it work in Chrome and not Safari. Have tried to choose/take images with HEIC and without, only Chrome works on iOS.

canIuse

SafariFeatureOn

Safari SafariIOS

Chrome ChromeIOS

tomayac commented 2 years ago

Safari only supports the Origin Private File System part. I have just clarified this in https://github.com/Fyrd/caniuse/pull/6255.

tmcw commented 2 years ago

Still need to work on a PR - my halfway solution to the problem that spawned this ticket - inconsistent behavior on Safari - is to mount the input element in the DOM. After doing so, that made the change event reliable.

jesben commented 2 years ago

@tomayac Thanks for the clarification, sad it is not supported in Safari yet.

jesben commented 2 years ago

@tmcw sounds good :) okay so the input file is required in the DOM for working in Safari. Append it to body with style display none? What about position, it is important it pops up the right place? Also cleanup afterward.

Currently I have a problem that my iOS Safari users suddenly do not get file browse when they click on button which clicks on hidden file input. It starts working and they can use several times. I'm also clearing the field after use element.nativeElement.value = ''; but suddenly it does not work anymore, it does not pop up, there is no javascript error, it is only in iOS Safari the problem is, very annoying...

tmcw commented 2 years ago

okay so the input file is required in the DOM for working in Safari. Append it to body with style display none? What about position, it is important it pops up the right place? Also cleanup afterward.

That's the gist. And note that none of this is Science, I wish it was and Apple documented its weird quirks, but this is just going off of random Stackoverflow threads and experimenting until I get a semi-working setup.

tomayac commented 2 years ago

The worst is that the exact same code was working on earlier releases. Thanks for investigating, looking forward to merging the PR!