Writable file API

Hi, I’m looking to build a pwa text editor. I’d be interested in a way for the app to register the ability to handle (read, stream, edit) files with given MIME types and/or file extensions via the manifest as described in the following proposal. The proposal has been left alone for the past year or so. Chrome web apps already had this functionality perfectly implemented. I think that this is a major functionality of any file editing app. Is anything being done about this anywhere? How long until we can expect to see such a functionality implemented?

Thanks for any info or for redirecting me to the appropriate thread(s).

Work on the File Handling API certainly hasn’t been forgotten, although as you say little progress has been made recently. We hope to pick that back up really soon.

I’m implementing a screenshot editor. Since covid WFH, I feel that we have been relying on screenshots a lot to communicate. I want to create an app to monitor the filesystem for new screenshot files and provide a set of tools to do cropping and annotation etc…

my current struggle with the filesystem access api is all permission related. I want to save the directory handle in indexeddb , so the second time a user opens the app, she won’t need to re-specify the screenshot folder. But this doesn’t work. As she needs to permit the access again. And the permit action can only be triggered by clicking a button.

Also certain folders are forbidden, such as the desktop folder on Mac. it says the folder contains system files. I don’t understand why.

I understand screenshots are sensitive, but I hope to give the decision to the users. Instead of disallowing the desktop folder, users should be warned and be provided an option to continue.

Overall, the filesystem access api experience is worse than that of a native app.

I got an idea and came up with a little working demo here. I basically got the idea to implement a native-esque file picker which is why the UI only makes sense on a mobile device :stuck_out_tongue: (choose a mobile device view in dev tools p.s. I did this in like 20 minutes so bear with me). What I mean by native-esque is basically like an app like whatsapp whenever you are prompted to upload a file they show a custom file picker with a preview for all the images in a folder. So I made a little prototype where the user would tell us where to look for images and it shows a nice little custom file picker with image previews.

I was able to use the new File Storage API to build a markdown note taking app https://bangle.io/ . It reads your locally saved .md files and provides a WYSIWG interface to edit them.

1 Like

I’m developing a kind of project list and notes app. All data is being stored in a local file. It’s actually an app I made out of personal needs to help me at my current job. I need the file system API so the data stays inside the company and does not get sent to an “unknown” server.

The app can be accessed here (but some features are still missing): https://project-fusion.vercel.app

btw: Is this also the right place to ask questions? Whenever the URL changes (i.e. when I navigation to a different page in the app) access to the file gets revoked. You can see that because the permission icon in the address bar disappears. I don’t know where the problem lies. Is that intended, a bug or related to the app being based on Next.js?

Hi again,

It’s been 8 month and already so much has changed in the filesystem access API. Combined with the still beta file handling api I have been able to make great progress in my PWA project.

Thank you to all those contributing to these APIs.

I do have one further feature request though. The fact that the write permission has to be granted by the user for every file of every session is a huge pain point to adress in the user journey. I can’t imagine my potential users to keep using my IDE like app if they are prompted for every first “Ctrl+S” (save) action they do.

Are there any existing solutions to this issue?

The solution I see is to have a single persistant permission prompt that can be triggered at install: “Opening a file with this app gives the app full read/write access to the said file untill the app/session is closed” Y/N

From there the read/write permissions don’t have to be persistant accross sessions. The permissions are granted as the file is opened via the “open file picker” or via the “file-handling-api” (by dbl click in the os fs). The permissions are thus given without any extra action/pain-point on the user side but are still restrictive enough for the app not to be a safety hazard.

Is this a viable solution and could it implemented in the current api?

If so :

  • How much time would it take?
  • Is there any way I could contribute to this solution?

If not, what am I missing?

Is there another place/thread I should post this suggestion in?

With this save issue fixed, my PWA project should be ready for launch! Sorry for the long post, I hope something good comes out of it.

Cheers

I think if you save the file handler in the history state, it does not get revoked. You can see this working in https://bangle.io

Hello everyone,

I would like to know if the following use case fits this proposal. In a game where a huge amount of data is needed, just a small part is effectively used at a given time. Think a game like a open world game. You don’t need to download all the packages but just a subset to start. For such an app, it would be required to have a private folder to handle the huge amount of asset bundles which will be updated each time the player jump from a region to another region. With this API:

  • will the player have to grant each access ?
  • will the authorization persist between the session in the browser ?
  • will the authorization persist between the session in a WPA ?

Thx you a lot for your insight.

Hi i will use that if that lands as binary pipe for my applications this way i am able to create virtual files and fill them with binary data that gives me the speed that i need to do realtime

before that this was not really do able workarounds are

  • fetch http overhead
  • nativMessaging with serialisation overhead sometimes and also frame overhead
  • devtools binary pipe stdio stdout stdin via nodejs to not get to much console serialisation but there is some as NodeJS/v8 only knows UTF-8 and UInt8 arrays internal

the most stable solution for realtime binary pipes was fetch with octet stream most best done via http3 as that is the only thing that currently works and scales for apps that work local and in the cloud WebRTC is also a solution if you transfer media the datachannel implementation is not compare able to http3 in performance

any way direct file access is exactly the remote pipe that we need to talk to the browser in a efficent way may it be for apps or automation this will solve a lot of usecases

for example we would be able to modify puppeteer to inject a small content script that simply opens our binary pipe and we would be even be able to do sync read and write lock.

This also helps me to implement scenarios like implementing couchbase-lite and sqlite3 as WASM in the browser without abusing the slow innoDB implementation that i use as virtual vs in the WASM builds.

This also is a good Alternativ to the direct-socket API wich fills the same needs for me as i can open directly a UDP port and send binary data without the fear that some one listens to that and intercepts the communication.

So overall this will enable binary realtime communication without http overhead and without the need for the tcp stack which slows that down

this also can be used to directly open a socket file and then binary talk to it so this can be used to code for example Linux Automation as everything in linux is a file.

And in general we can talk to anything with that without TCP/IP overhead which is hugh if you do something many million iterations per secund.

Oh Also this is needed for WebGPU to directly render from stuff like blender into it local and remote.

This gives also the capabilitys to port more software to WASM. as we need to do less Serialisation

  1. this proposal is good, I for example use something like tiddlywiki - for those who don’t know tiddlywiki is a singleapp application that is used for notes etc like evernote/notion etc in my use case this would be very interesting - i have to use syncs or 3rd party plugins to sync the file changes i make
  2. if this api exists and is concrete this could make my life easier
  3. the problem I have is this: every modification I have in the html file has to be saved, for that as I said earlier “synchronizations or third-party plugins to synchronize the file modifications I make” - so that’s what happens
  4. I have to have "syncs or third-party plugins to sync the file changes I make - since it doesn’t exist within the browser itself something like that
  5. with this api, i can reload the page and i wouldn’t have this problem i said since everything was saved in the file directly through certain permissions as some suggest here

1. Use cases:

  1. Browser Extensions, Progressive Web App(PWA), Multi-Page Application(MPA) and/or SingleApps(SPA) as Tiddlywiki
  2. Proposals that would complement or be helped::

2. Links

  1. Single-Page Application vs Multi-Page Application
  2. Cross-platform vs. single platform development - Here's what you should know | Our Code World
  3. Multi App Strategy vs Single Mobile App Strategy | Differences, benefits, and examples - Appy Pie
  4. https://applandeo.com/blog/single-page-applications-versus-multi-page-applications-what-to-choose/
  5. Apps vs. Applications. What's the Difference & Why it Matters | TrackVia
  6. Single-Page Application vs Multi-Page Application: Pros, Cons, and Which is Better?
  7. You probably don’t need a single-page application | Plausible Analytics
  8. SPA vs MPA: what is better, faster, stronger? — MindK Blog
  9. Beyond SPAs - alternative architectures for your PWA - Chrome Developers
  10. A Comparison of Single-Page and Multi-Page Applications - DZone Web Dev
  11. Web App vs Progressive Web App: Why are they different from each other?
  12. PWA vs MPS vs SPA - what’s the best choice for your app? | Neoteric
  13. https://www.reddit.com/r/Frontend/comments/o8kvjh/what_the_alternatives_to_spa_single_page/
  14. PWA vs. Native Apps and Hybrid apps: pros and cons | Neoteric
  15. chrome.storage - Chrome Developers