1

I am trying to have a web application access local files. A web IDE like vscode can directly change or rename local files. While vscode doesn't seem to use a tag like <input type="file" />

My hope is to load a local directory and control the files like remove/rename through my web application. The web IDE's solution may provide some reference.

How does vscode access the local file?

cliff yang
  • 52
  • 5

1 Answers1

2

vscode.dev uses the File System Access API, which allows web applications to directly read and modify the filesystem.

Rather than using a <input type="file" />, it calls window.showOpenFilePicker() to get a FileSystemFileHandle, which can then, in turn, be read and converted into a FileSystemWritableFileStream to which the browser can write and save files. Similarly, the API can handle directories and browse the file hierarchy.

Of course, this is a simplification, as I could not possibly go through every detail of the API in this answer. The MDN article has a lot of examples and thorough documentation that you will want to read through. For testing, it should be noted that the API is only available on sites served through HTTPS, so you're going to need to set up SSL for your localhost. Also, the API is not available in all browsers, so be sure to check the compatibility table.

Michael M.
  • 10,486
  • 9
  • 18
  • 34
  • 1
    Agree with the answer. One should also keep in mind that only about 40% of browsers currently support this API. – matthiasgiger Jan 29 '23 at 15:44
  • I got a "The user aborted a request" error when I try to rename a file with `file.move()` function mentioned in [this answer](https://stackoverflow.com/questions/69925888/renaming-moving-files-using-file-system-access-api-javascript). The flag `chrome://flags/#enable-experimental-web-platform-features` can help but It is not a good idea to manually enable the flag. Is there anther way to rename a file without manually changing any settings? – cliff yang Jan 31 '23 at 06:18
  • @cliffyang I'm not entirely sure what the issue is because I don't know what your code is. If you're still having an issue, then I'd suggest posting a new question on Stack Overflow. – Michael M. Jan 31 '23 at 14:14