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