Comments (13)
I just downloaded Firefox 78.11.0esr (64-bit) on macOS 12.0 Beta (21A5248p) and ran through the demo. All features worked, but for directoryOpen()
(not used by Excalidraw) it seems like there is some filtering in place for certain directories like Pictures
. It works fine with subfolders, though. I have a hard time figuring out where fileOpen()
could fail. Maybe at this point it's worth opening a bug for Firefox directly?
from browser-fs-access.
Yeah, I cannot reproduce either but that doesn't help us. Before I'd open a Firefox issue I'll want to take some time to review the hack we're using to polyfill the rejection, and whether it's reasonable to expect browsers to behave deterministically in this case.
from browser-fs-access.
I have created a reduced test case that you can try and step through in Firefox. For all the Firefox instances I could test this with, it worked correctly (the screenshots below are from Firefox 89.0.1 (64-bit)
on macOS 12.0 Beta (21A5248p)
):
from browser-fs-access.
I'm the reporter of the linked excalidraw issue excalidraw/excalidraw#3740 and I am able to reproduce the AbortError problem using your reduced test case in 78.11.0esr.
The problem Is, that selecting a file using double click leads to a pointer event being triggered before the change event of the file dialog, therefore aborting the selection.
I was able to watch this by enabling event logging in the debugger for "Control -> change" and "Pointer -> Move". There were no other events interfering:
pointermove { target: html, buttons: 1, clientX: 717, clientY: 72, layerX: 717, layerY: 72 } script.js:17:35
change { target: input, isTrusted: true, srcElement: input, currentTarget: input, eventPhase: 2, bubbles: true, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, … } script.js:24:6
The selection does work if I submit my selection using the "open" button rather than doing a double click. I was also able to reproduce this behaviour in excalidraw as well.
from browser-fs-access.
I tried doubleclick file selection and it just worked fine for me. No matter if the file open dialog is over the Firefox window, just overlapping with it, or completely distant from it. It worked in all cases. What platform are you on?
from browser-fs-access.
I can intermittently reproduce in Firefox when using the double-click on the file.
And another interesting thing. Trying to reproduce in Brave I was getting a different bug: the AbortError was sometimes shown right after the click, before the file dialog was opened. And since the promise was rejected beforehand, the ensuing file open didn't resolve and stayed rejected. EDIT: tried on excalidraw.com in Brave and indeed I can reproduce there as well (took ~10 tries).
So Chromium is affected too, except in a different manner.
from browser-fs-access.
I'm on Windows 10 64bit 20H2 (Build 19042.804) with Firefox 78.11.0esr (32-Bit) and I can reproduce the issue reliably.
I can not reproduce the issue using Google Chrome Version 91.0.4472.101 (Offizieller Build) (32-Bit) using the same platform.
Let me know if i can help you somehow pinpointing the problem.
from browser-fs-access.
I'm getting the AbortError on FF even with single click (not sure if more or less often than double click). Leads me to believe the Chromium and FF bugs may be the same, except FF doesn't render the error in time before the dialog opens.
from browser-fs-access.
How does the polyfill even work ever?
browser-fs-access/src/legacy/file-open.mjs
Lines 52 to 62 in ad4399f
var handler = () => console.log('click');
document.body.addEventListener('click', handler);
document.body.click();
document.body.removeEventListener('click', handler);
The above catches the programmatic click
event because the listener is bound synchronously.
Maybe the browser-fs-access hack depends on the file dialog blocking the thread? But how is the ensuing change
event fired before the click
event.
Actually, from @teramawi's comment #53 (comment) it seems the click
event doesn't come to play, and it's the pointermove
event. Though it's a comparable problem.
EDIT: ok, checking the source, we're not listening on click
, which is why the click()
does not trigger the rejection.
from browser-fs-access.
I can confirm the Brave bug relates to pointermove
as well. And it's 100% reproducible by slide-clicking (moving your mouse a bit when clicking) on the button:
from browser-fs-access.
I get this issue 100% of the time on Brave. Even when not moving the mouse at all and triggering the event with tab+enter
, although unlike the screencap above it errors only after I select a file and click open.
Brave: Version 1.25.73 Chromium: 91.0.4472.106 (Official Build) (arm64)
MacOS: 11.1
from browser-fs-access.
Hi,
Same issue here with FF.
Here is my custom legacy setup to circumvent this matter :
export const setupLegacyCleanupAndRejection = rejectionHandler => {
const timeoutHandle = setTimeout(() => {
window.addEventListener("pointermove", rejectionHandler);
window.addEventListener("pointerdown", rejectionHandler);
window.addEventListener("keydown", rejectionHandler);
}, 500);
return rej => {
clearTimeout(timeoutHandle);
window.removeEventListener("pointermove", rejectionHandler);
window.removeEventListener("pointerdown", rejectionHandler);
window.removeEventListener("keydown", rejectionHandler);
if (rej) {
rej(new DOMException("The user aborted a request.", "AbortError"));
}
};
};
Basically I'm just delaying the start of listening for "abort" events.
from browser-fs-access.
I have now removed the rejection handling for legacy browsers entirely since it caused more harm than good. People who need the throwing behavior can configure their own handler, as per the option introduced in #45.
from browser-fs-access.
Related Issues (20)
- Add mode option HOT 1
- cannot find name ‘FileSystemFileHandle. HOT 5
- Permission issues on Qutebrowser HOT 1
- fileOpen is not working in server, but it's working fine in local system HOT 3
- FileSystemDirectoryHandle does not have proper types HOT 1
- Use showPicker() instead of click() "legacy" HOT 4
- example code: Cannot redeclare block-scoped variable 'blob'
- directoryOpen does not allow creating new files in an empty directory HOT 6
- demo is not work in edge HOT 3
- supported always returns false when in iframe HOT 2
- Recursive directoryOpen not finding all files in nested MacOs directory HOT 8
- Error: Cannot find name 'FileSystemDirectoryEntry' HOT 1
- Request to Export legacy API HOT 1
- Remove Listener Issue HOT 4
- Get confusing mime type results with Chrome and mac OS HOT 1
- Failed to execute 'close' on 'UnderlyingSinkBase' HOT 1
- No support for MIME charset? HOT 1
- Network folders HOT 1
- Download does not appear in Browser Download History HOT 1
- Implement `cancel` event in legacy code HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from browser-fs-access.