JavaScript File System Access API Tutorial - Read, Write and Save Files

in this video we're going to be trying out the file system access api and i'll leave a link to the documentation in the description below so the first thing we can do is show an open file picker to the user so that they can select a file and then the application can read and write to that file we can only execute this function on user interaction so we'll start off by creating a button and then we'll run some code when this button is clicked so we'll just create that function and in here we can call window.show open file picker so now we can click the open file button and as you can see we're able to select the file so this function is going to return a file handle so we'll just put that into a variable then we can use filehandle.kind to determine the type of files this could be a file or a directory so when we select a file you can see it says file in the console whereas if we select a directory and it doesn't seem to be letting me select a directory for some reason which is unfortunate so i'm not sure what's going on there so anyway we'll move on so to get the data in the file we have to use filehandle.getfile so as you can see this will return a file object with all the data so we have the name of the file the size of the file the type of the file and also some information about when the file was last modified so if we want to read the text from the file we have to use filedata.txt and actually the filedata object implements the blob interface which means you can use functions like json etc so anyway we'll just log this text and as you can see now when we select the file all our javascript code is getting printed into the console so we now move on to saving to the files what i've done here is i've added in a text area and when we read the data from the file i just put that data into a text area so now when we open a file we are able to edit that file directly from the browser so what i've done here is created another button for saving the file so i've just moved the declaration of the file handle to be global so to save our file we need to create a writable stream and we can get that from the file handled by calling createwritable so now we can write to this stream using stream.write and in here we have to pass in a blob of the data we are writing so in our case that's just text area dot inner text and then to finish saving the file we have to actually close the stream so now when we open a file we can type in some text and click save and as you can see this data is replicated on our local file system so now we'll move on to showing a saved dialog so we'll create another button for saving as in our javascript file we'll create this function so what we'll do is we'll update our current handle to be for a new file and to get this new file we'll use window.show save file picker and then the rest of the process is the exact same so i'll just call the existing save function that we have so we'll save our changes and then refresh so this time when we load up our javascript file we'll also have the option of clicking save as so now we can call this main2.js and as you can see that new file has been created on our system so we can proceed to code in this new file for example we'll set the body background color to be light blue so we'll hit save and now you can see if we open our html file and load up our main2.js instead and then we refresh the page now as you can see the background is blue so the final thing i want to show you is that you can pass options into the open file picker so this allows us to specify the various file extensions that are accepted so for example we can accept python files and then this line prevents us from changing the accepted file extensions in the dialog box and then finally this line allows us to select multiple files so now if we open a file so as you can see we're not able to select any files because i don't have any python files on my computer because javascript is a better language so unfortunately that means we'll have to end the tutorial here and i just found out that there is a separate show directory picker function so anyway all of this is on the documentation link in the description so anyway that's going to be the end of this tutorial special thanks to the top patreon supporters who helped make these videos possible

Channel: CodePulse

Views: 58,784

Keywords:

Id: 8EcBJV0sOSU

Length: 4min 44sec (284 seconds)

Published: Sun Aug 01 2021