Chrome Browser Directly Reads and Writes Local Files

write in front
The latest version of Chrome (Chrome 83) supports reading and writing local files directly.
How to currently read local files
The most common way to read local files at present:
1. Use the input tag to get the file File object.
2. Use FileReader to read the file.
var reader = new FileReader();reader.onload = function (event) { // event.target.result is what is read...};// The file here is a File object instance reader.readAsText(file); // reader.readAsDataURL(file);// reader.readAsArrayBuffer(file);
Write file method:
Unfortunately, there is currently no way to write files directly to the local. However, it can probably be achieved in the following way:
var textFileAsBlob = new Blob(['hello word'], {type:'text/plain'});var downloadLink = document.createElement("a");downloadLink.download = 'test.txt';downloadLink.href = window.URL.createObjectURL(textFileAsBlob);downloadLink.click();
How to read and write files under the latest Chrome browser
read file
Use the api window.chooseFileSystemEntries. It should be noted that calling this api must be triggered by a user's operation, such as a click.
// file handle let fileHandle;button.addEventListener('click', async (e) => { fileHandle = await window.chooseFileSystemEntries(); console.log(fileHandle);});
After calling the api, a file window will pop up. After the user selects the file, the handle of the file can be obtained.
Then, call the handle method to get the file content.
let fileHandle;button.addEventListener('click', async (e) => { fileHandle = await window.chooseFileSystemEntries(); const file = await globalFileHandle.getFile(); const contents = await file.text(); // here The methods also include: slice(), stream(), arrayBuffer()});
write file
Writing a file is divided into two cases, one is to write directly to the original file, and the other is to write to a new file.
To write the original file, we only need to get the handle of the original file and call the method of the handle.
const writable = await fileHandle.createWritable();await writable.write('new content');await writable.close();
To write a new file, you first need to create a new file, still calling the api window.chooseFileSystemEntries, but this time you need to pass in some parameters.
button.addEventListener('click', async function() { const opts = { type: 'save-file', accepts: [{ description: 'Text file', extensions: ['txt'], mimeTypes: ['text/ plain'], }] }; // handle of the new file const fileHandle = await window.chooseFileSystemEntries(opts); ... });
Then, according to the previous method, write the content.
For more information on local file reading and writing, refer to this article: https://web.dev/native-file-system/
Sample Demo
The new file Api is very handy. I simply wrote a demo to edit local files in the browser.
The Demo experience address and code are here (please use the latest version of the desktop Chrome browser to access, and enable file read and write permissions):
https://coypan.info/demo/chrome-native-file-system-api.html
write on the back
What do you think of this wave of Chrome updates? web app? web os?