Build a File Picker app using HTML, CSS, JavaScript | Vite | File System Access API

[Music] hello everyone and welcome back to max programming and in today's video this is what we are going to build so in the previous video we discussed about the chrome file system access api and if you remember we did not use any intellisense we did not have any right so in this video we are going to build this simple project where you can select a text file or an image file or even a video file and you can even select that so right over here you can click on any three of these buttons so let's say select text file for now and so we can select any text file uh you can say any dot txt document for this one so let's click on open on this one and as you can see we get the file name which is text.txt of course and we've got all the contents right over here and let's now select an image file so i'll select an image file and as you can see we've got this image right over here so let's open that up and as you can see we got the image plus we can also select a video file so let's just select this video file and boom it's also like you know you can even do that and i'm just gonna mute this and let's play this so it also works when we play it right and this is how everything works we are going to build it from scratch but uh the styling is what we are not going to get uh focus on as of now because you know it's it will get too long if we also work on styling so right over here i have this github repository for this project what you can do is you can just go ahead and click on the styles.css and you can get everything like you know just copy and paste everything in the style.css file now let's see how we can work on this so what i'm going to do is i'm going to open the terminal and so i am in my desired directory we are going to use a tool called wheat now if you don't know what is wheat don't worry beet is simply a bundler or you can say a really nice tool which can help you get intelligence in almost any technology so like we are going to create a static app with html css javascript but we can use npm packages to get intellisense and all that stuff so you can create a we tab very easily so you can say npm init at vgs app and then you can say the name which is chrome fs app and i'm going to hit enter and then you will get a prompt where you can select the technology you want to use so you can just select any one of these so i'm going to select vanilla because this is a vanilla project right you can also select typescript if you want but you're going to go with javascript and so it's as simple as that you can just cd into chrome fs app and you can run npm install and then to run the server you can run npm run dev so we got all of our dependencies installed correctly and if i ls into this folder as you can see we've got a lot of stuff we've got node modules we've got git ignore which is important also if you are pushing it to a github repository we've got the favicon index html main.js packaged and packaged log json and styles.css also so now let's say npm run dev and if we hit that it's going to start a local development server which is hot reload again so this is another benefit of beat so i can just control click this to open this up and bam here we go so we got localhost 3000 as our helloweed and then we got a simple link to documentation so let's close this one out and let's open this up in our code editor so i'm going to use this to visual studio code so i can just say code dot to open that up in visual studio code and here it is so the first thing we want to do is get the styles done okay so i have the styles open up as you can see so we have the style so i'm just going to copy these copy all of these so let me just go from the bottom to the top so we can copy all of these and we can replace them like so next up uh we can save this file and let's go to index.html and we have nothing right over here second thing we want to do is let's change the title and let's say it's going to be file pickers with the capital p and then uh mainly in the main.js is where the style css is linked but we don't want to do that we can just link right over here so link we can link the css file right over here for performance reasons you know because javascript loads after the document so we can just say it's going to be dot slash style dot css and then we can just remove this import of course and we can also remove every code so that doesn't matter because we are going to remove this whole div and now let's add the html so if you take a look if we go back and if you go to index.html also we are going to copy the html so don't worry about that i will explain you how it is so we'll just copy everything inside of the body so basically the main tag and we can paste that so let me explain what is going on first of all we have a main tag then we have a div with the class of pickers then we have a button with id of text select which this id is what we are going to use to select it okay so this is the button which has this icon so this is an icon so you don't need to worry about you know why is this long html svg and all that so we can just collapse these all of these svgs don't worry about those and we have got the select text file select image file and select video file then after the pickers div we have the div called content div class content which has nh2 with the file name with the id of file name so inside of this h2 we'll store the file name and instead this p element will store the file content so basically if we select a text file this p tag will help like we're just going to put the inner html in a text of our all of our text file inside of the speed tag then we have this img tag which with an id of image content so we are going to change the source and same for the video with the idea of weight content okay now one more important thing that i want to tell you is in the styles.css we are setting the video display none because if we set the controls to on okay on the video the the controls like you know three dots and then plus and then you know all that stuff the video element will still show up so it will not hide uh to hide that we use display none okay so that's important one thing you need to know that's it for our html and css hopefully and let's close it out now we are going to work only with javascript but we are not going to work with one file so let's install a dependency okay not really a dependency but a dev dependency instead so what is this uh well we are going to use the file system access api so so for that sake we are going to install some depend uh one dependency which basically gives us intelligence in our code editor so let me just type that out so right over here npm i which means install dash d which means it's going to be a dev dependency so we don't need on production and then you can just add this name which is add types slash wicg file system access so we these are the types for uh these are the type definitions for file system access api and these will give you intelligence in your code editor so it's really nice okay so you can hit enter because in the previous video if you saw it was really hard to type your own you didn't get any intelligence that's why so once all of it is done it will magically provide you the intellisense just take a look so previously what we had is we used window dot open file picker right open show open file picker so if i just say window dot show open as you can see we got it and even inside of this function what we want to pass in the options right so open file picker options and you know all these things so what will be the options option is an object of course and then we hit control space we get all of these intelligence the types and multiple and all that so it's it's a really nice package which is like it's it's very nice so next up let's create some files so i'm going to create a new folder called js in which will store all the javascript files and the first file we are going to create is get text dot js and we are going to keep the keep all of these empty as of now so let's create a new file and let's say get image.js and let's say get video dot js again and the last one is going to be constants dot js and so this file will do what they are named so get image will get the image and return it to you get video will get the video and return it to you and all that stuff and constance is going to store the constraints so let's start with the html first of all let's select all of the elements so we what do we want to select we want to select the text select image select and video select these are the buttons okay so first of all all of the buttons all three buttons then we've got these tags for this so the image tag the video tag and the paragraph tag and then finally the h2 so what i'm going to do is i'm just going to say const we've got text select is going to be equal to document.getelementbyid and it's the same thing take select and we're going to do the same thing for the next two buttons so i'm just going to copy and paste those you know we don't want to waste time so we can just paste this so image selection video select then we can say const file content tag if you can name it whatever you want i'm just naming it file content tag to understand that you know it's a tag right for file content so we can just say the id for the paragraph is file content remember this is the paragraph where all the file contact will get stored then for the image in video i'm again i'm just going to paste them so as you can see we got the image content and video content and finally we got the file name tag so i'm just going to paste that in so file name tag is basically the h2 where the file name is stored so now what we can do is we can just uh add the event listeners for text select image select and video select so let's go ahead and do that so i'll say text select dot on click okay that's what you can do and then we can set it to an arrow function now what we can do is we can just say uh what we can just do what we did before so we can mark this function as a sync okay asynchronous function then we can say const and then file handle which we got returned from and then we can await the show open file picker okay and then you can also pass in the options now one thing to note is that we are not going to put everything inside of this big function right we are not going to do that we are going to separate our code uh in different different files so let me explain how this is not what we are going to put here we are going to basically say const and we get an object back okay so that's what we are going to do structure so if you don't know what is restructuring i have a video on it and then we can set it to await get text file now this function does not exist right now we are going to create this function in our get text file okay i mean get text.js file so what is going to return to us well it's going to return to us the contents and the file object so if you remember the file object was contained a lot of data for the file like the name and all that stuff so let's go to our get text dot js file and right over here we can say export const get text file oops we can just set that to an arrow function and not really a simple arrow function but an asynchronous arrow function because remember we are awaiting this get text file so we are marking this as asyncs so if we mark this as async that that's the only time we can avoid it right so we got that and now what you can do is you can just import this function now we export it right so we can just import that so let me import it i can just say import something from dot slash js slash get texts so we can import get text file cool now this function will uh what will be inside of this function will simply it will simply do what it says so it will get the text file so we can say const file handle again the same thing in that we did in the previous video it's going to await the show open file picker now show open file picker is also an asynchronous function that's why we are awaiting that so waiting for that to finish and you can pass in the options which we are going to do a bit later then we get the file so we can just say const file is equal to await again file handle dot get file as you can see you get these and you get this intellisense which you did not get in a normal html css js project right so you can just invoke get file then we got the contents okay this is the same thing we did in the previous video so we can await file dot text now right over here as you can see we get the contents and file in an object we destructure those so we have to return those right so we can just say return an object and we can say contents and file inside of that object that's it that's our whole get text file function so let's save this and right over here we're using it so let's just say console.log the contents and also the file of course okay because the both of the things that we get so hit save and as i told it automatically refreshes our page so uh let's refresh it but actually we haven't started the server so let's just say npm run depth and then when you get back as you can see it's it's up and running so we can select a text file image file and video file these two buttons don't work right now because we haven't set the event handlers but this one works so let's click that and really nice but the thing is we get all files right over here so you know the image text and video everything comes up right over here but we want only the text we are going to pass in the options for that later on but for now what you can do is you can just select the text and let's get to the console because we also logged it so console and you get this whole contents and also the file object right over here hopefully you can see it i don't think you can because of my webcam but here it is here's how it looks like so we get the contents and the file object and from the file object we can use the name of the file which is text dot txt okay so that's about it so we got this select text file uh i mean get text file function up and running now let's work on some options uh so if you know inside of this show file picker options we've got the options which is of this type option open file picker options so basically what you can do is uh if you remember we created this constants.js file inside of this file we can create any constant file which we want to use okay so we don't want to put all of the options right over here it will mess the code up we want to clean we want to make the code cleaner so right over here i can just say export const and also with this you understand how to work with multiple files because you know it makes your work efficient more efficient instead it will be harder to manage every every piece of code okay if you separate it in files it will be nicer so we can export const a text file options so you can name it anything you want i'm naming it text file options this will be set to an object now here's a cool tip what you can do is you can just add this comment up here and basically this is a js doc comment uh what this does is you can just say add type and then inside the curly braces you're passing the type so if we hover over this as you can see we got the type open file picker options so um what this will do is it will allow you to have intellisense on this object so now if i hover over this this cons text file options is of this open file picker options type so um that's how we type a variable in a javascript file so if you are not familiar with typescript or if you are familiar with typescript you will love this i guess um but this is a simple way to get intellisense okay i'm not doing any type checking this is a simple way to get intellisense so now if i press ctrl space as you can see we got intel sends you know multiple types and all that um if i did not add this then if i hit control space we don't get any intensities you know everything is something else so let's add that back so now what we're going to do is we're going to add the types okay let me just okay so i can just say types is going to be an array so that's how you do it types is going to in array with each and every object so i can say description on this one and description will be text files you can have any description so description is what shows uh on the all files option right there down there i'll show it to you so we can say text files as the description and then we can say accept will be an object and this object will say text slash plane and then an array with the extension so dot txt okay so what this is doing right over here so types is an array you can specify any object so you can create a new object you can add description if you want to it's not important you can add accept which is an object and then you can pass in the mime type and then this uh this array of extensions so that's how you do it so basically this description shows as i told on the bottom right corner in the accept object you can pass in multiple mime types so this text plane you can add images you can add videos we are going to see that and inside of here you can this contains an array so this will be an array of extensions so i can just add another extension okay i want the png file which is not valid actually because text slash plane is going to be txt only it can be other format also so if you want a javascript file you can add text slash javascript and then it's going to be an array of dot js file and you can also get the dot jsx file if you want that's that's your choice and if you want uh any any file text slash anything you know any text file so you can just add star so that's how you do it and you can pass in all the extensions if you want but we are going to keep it simple so tech slash plane so this is basically an object with the options which we are exporting right over here so remember this export keyboard okay right over here export and export now we can add this right in here so let's just import this so i'm going to say import something from dot slash constants remember this is the file and then we exported this text file option so let's import that and let's just copy and paste this right over here hit save and let's get back to the web browser now what you'll see is let me just click on this as you can see we got this simple select uh text files text right over here as you can see uh before we got this all files but now we get text files as the description then you've got the text okay we also had the image we also had the video beforehand but now we also have we only have this text file so it only shows us the text file and if i click that it just logs to the console now let's get to the main work okay let's remove this this console log we don't just want to get all of this we also want to um put it on the web page so how can we do that well this is the thing file content tag so we can just say file content tag dot inner text in our text is going to be equal to contents because that is the file contents in the end right and the next thing is the title of the file so file uh file name tag as you can see this one so we can just we can also add that so file name tag dot inner text is going to be equal to a template string so we can just say file name and then put a colon and then we can add template strings this is es6 javascript if you don't understand it basically this is a string and then you can embed many things inside of this string so i can just say file which is the file object that we get from get text file dot name also you got intel's inside over here so you can see this is type file and then you you get this intelligence all right everything is done hit save and let's see the magic happen so i'll just say select text file and i'll open this text file and dang it as you can see we got the file name as text.txt and got all of this stuff now now i guess you know what is the main process of working with it so let's work on the image and the video very quickly so it will be very short i mean not really short but the process is a bit different but it will be very easy so now let's say image content tag i'm not really image contact it's going to be image select dot on click same as the text and then it's going to be async also so we are going to keep the format of all these functions same so it will be the same thing right over here but the function will be different so let's copy this and paste this as we are not going to use get text file we are going to use get image file this is what we are going to create so we imported this from get text right so let's close not really close but let's keep it open and let's open get image and so let's also duplicate this with alt shift down and let's say it's going to be get image file so i'll just say get image and i use ctrl d to you know change both of these things now let's go inside of get text and let's copy everything and let's paste everything and let's say this is going to be get image file really nice now here's a twist these are the text file options right we don't want the text file options we want the image file options instead so let me go to constants and let's create a new object so let me just copy and paste the previous one like this and we can name it image file options so this is going to be image files okay simple and the mime type so the types okay what we are going to set the type so that the types will be image slash jpag first one so the extension array dot and the next extension will be dot jpeg so these are the two extensions we are going to accept uh secondly we can add image slash png and we can add the array again so this will be dot png oops png next up we can add image slash svg plus xml this is the mime type you can just google the mime type if you don't know what is the mime type svg file or dot webp file dot png jpg and all that so google is your best friend so dot svg and finally lastly we got image webp and that is dot web p so hopefully until now you understand what is going on right and let's rename this to image file options and now inside of here i can just get this and get this and i can say image file options really nice the only thing we have to we want to change now is this contents thing so this is not going to be the text function now because this it's an image right we don't want to convert it to a text we want to convert it to an array buffer uh it's not a really it's not the process you really need to understand but it's uh it's worth in learning because uh converting an array buffer to data url is really really helpful so let's remove this line and let's say const every buffer which is what we are going to name it as a buffer is going to be equal to file dot every buffer and we can return as a buffer cool that's it okay we used the array buffer function instead of the text function now um what you can do is you can just go to main.js again so you can you don't need contents now because content is not returned okay what returned is array buffer so we cannot do something like dot in our text is equal to contents and all that in this image file what you what you have to do is you have to create a url so you have to kind of upload this image on your own website you can host it but it's not really hosting okay it's creating a url for the image because if we take a look at the html file of course if i see the image file it needs a source it needs an src so src should be any url local or anything so we get we can create a data url and that's what i'm going to show you right now so there's a very very simple way to create a data url from our file and let's see how we can do that the first step is to not get the array buffer uh like we did this uh file dot array buffer but we don't want we don't need to do that because we are not going to use this anyways so let's remove this and secondly we get a blob which is file okay file is of type file right over here as you can see but it's also a blob so we can create a data url so i can just say create data url or instead even instead of that what you can do is you can just create a function constant so let's just go ahead and do that so i'll say const create data url okay this is what we are going to use inside get image so now what i can do is i can just return the file from the get image file function and then we can just say cons create data url is going to be an arrow function of course and we're going to get the file or instead let's just say blob because that's the nicer name for this and then you can also type it so if you want uh intellisense you can just use js doc comments like this you can say add param and then you can pass in the type and then the name of your parameter so it will give it the type but it's not necessary for this video so we can just export this also because it's important we are going to use it in a different file right so export const create data url now blob will be basically of type blob right so what you can do is you can just say const url creator is going to be equal to window dot url or it's going to be window dot web kit url so basically this is for cross browser support okay if one browser does not support it then other will eventually we would need it because we would not need it because chrome supports the file system access api only chrome and all chromium based browsers so you got the url creator right and then you can just say const media url or not data url media you can name it anything you want is equal to url creator dot create object url and then pass in the blob you can pass in anything you want and if you create a url for that and then finally you can return the media url that's it okay so now let's go ahead and go to our main.js we don't need any buffer now because we don't use it anyways and then you can just say uh if we go back to our constraints.js this is the create data url function so i'll say const img url is going to be create data url so as you can see we can automatically import it like so and then the blob the blob is file as i told this is the blob that we need to pass in inside this function finally we can say img content tag dot src is going to be img url so this is the final url this is the string url that we want to set hit save and now this is going to work so cross our fingers and select this image file works so we got the url and even if you do this like right click and open image in new tab this is the url blob uh colon and then you've got this data url so that's how you do this and we're going to do the same thing for the video okay this is going to be very easy let's get back to our code editor and as you can see everything is very very simple until now so our video file is going to be a get video is going to be the same pretty much the same as this one so let's just copy all this let's open up the get video get video dot js by let's paste everything so we're going to export get video file um this will be an asynchronous function and then you do the same thing but instead of image file options we are going to create a video file options so let's go to constants and now i'm not going to type it out right now so let me just copy and paste this and i'll explain it to you so as you can see we got export cons video file options it has a description of video files and it accepts the mp4 and mkv that's it okay and you can also add webm and all that so let's add webm web m if you're wondering how i duplicated it i use alt shift down okay that's how you do that hit save and let's get the and let's just say video file options and then you get file from get file and then you return the file that's what we did in the image let's close this let's close that and now finally let's say vid select dot on click is going to be equal to an asynchronous function like this and then we can get the file again so const something is equal to a weight you get image file or get video file instead oops what's wrong maybe we can check the get video again let's actually import this so i can just say it's going to be get video file cool we can just get video file now and we can we don't need anything and then we get the file back okay you can also return you know let's just not return in a whole object and then file inside of that let's return it like this so it looks cleaner okay you get the file it's simple as this so you can just control click to go there and then i can just remove everything like so okay and then let's remove this and now once you get the file you can create const with url is going to be await i'm not awaiting but it's going to be the same thing create data url and then pass in the file inside of that and then i can just say with content tag dot src is going to be the vid url finally let's hope it works so select video file and let's select this video file and nothing works so it didn't work because the video file is uh the video tag is display none that's that was one of our faults okay so i showed you before in the style.js as we said the video display to none and it's important also we are going to keep it that way but let's now it it works okay if i show it to you if we go back and let's just go ahead and go to elements as you can see in this video we got the source and i can even go to this i can even go to this blob and you can see the video it works okay it it works exactly fine but it's that this video is display none so what we can do is so let me show you a demo that what the problem is right now so if i say select text file and let's select text file like this okay if i say select image file and then you select an image file as you can see we got the image and the text both of these and the file name is text.txt that's not how we want it to be we want uh only one thing to appear at time so how can we fix this that's what that's why i skipped the video display to none now let's do this um first of all we can just say we can just create a function so i'll say const hide video player hide video player is going to be equal to an arrow function and then we say if vid content tag dot get attribute so we say get attribute this is basically to get the content of an attribute so source if this is equal to an empty string now if you're wondering why didn't we do dot src well we didn't do that because it's not going to work because if you take a look in the elements the src does not have this equals and all that you know it's it's just like this unknown so it it works only by this thing so you can just set the video content tag dot style dot display is going to be none so this basically means if the source attribute is an empty string so if there is no source it's going to be none else we can say with content tag dot style dot display is going to be block and then we can just call this function right over here so hide video player and then we can call it in every iteration like here and then here and finally here also hit save and now we it's going to work so i'm going to select a video file this one it works okay you got all of this stuff you got this cool little five second video which you can basically like it can be any you can select any video it doesn't matter and now let's work on the multiple things that we get we get the text we get the image we get the video and all that so let's work on that and that function is also pretty simple so i'm going to create some variables so let me just say let and let me just put that on a new line so i'll create three booleans so basically i created stxt open is image open and is video open all of these two false so these are three boolean variables which will represent if the text file is open if the image file is open and if the video file is open then what we can do is we can create a function so our cons remove other elements it will be an arrow function again and right over here we can check if not is image open okay and let's say if not is text open what we can do is we can just say file content tag dot in our text is equal to an empty string basically we are resetting it to an empty string if the this text open is false okay not this this as you can see this exclamation mark that's how we do that then we add another if if not is image open in this case we can set the image content tag dot we can just say set attribute or you can just say source is equal to an empty string okay that's how you do that you can also set attribute set attribute is cleaner way of doing it but it's fine in this video finally we can set if not video is video open we can set the vid content tag dot src is going to be an empty string also the width content tag dot style dot display will be none okay so basically we don't want anything of the related to the video then finally we can call this function so we don't need to call this function like we did hide video player because we don't want to call this and start we want to call this every time we get a text file or an image file or something else right so first thing we are going to do is we are going to set something so i'm going to say is text open oops is txt open is going to be equal to true because we select a text file right so it's going to be true and is image open is going to be false and is video open is going to be false you remember you know it's important to set them to false because eventually they can cause problems right and then i can say remove other elements i can call that function that's it okay that's it so let's just copy all of these and let's put that but in this case uh this will be false is it is image open will be true and finally this will be false of course and let's just copy this ctrl c and let's you can just say control v okay and then finally we can copy this again and then paste this yes we are repeating code but it's fine for now we can set this to false the image also should be false and then this one will be true and finally it says remove other elements call that hopefully this is everything completed also i forgot one thing this file name tag dot inner text so let's just put that right over here like after this okay this one and this one so that we get the file title right we did not get it everything is done i can select a text file so let's select this text file you get the file name and if i now select the image file everything is replaced you get the image dot png or jpg and then you can also select png webp images and you get the image if i select a video file here's the video file it works okay even if i play this if i now select the text file everything works now i hope this project helped you learn a lot about javascript mostly javascript and the chrome file system access api because this is a very huge project like not a very huge project but a huge project because you work with multiple files and then you got into asynchronous operations and all that i hope this video helped you give it a thumbs up if you did let me know your questions in the comments below if you have any of those okay don't worry don't hesitate to ask any subscribe to the channel if you want more content if you want to get notified for more content like this and let me know in the comments if you have any suggestions if you have any feedback for me it will be very great to improve myself by you all because you are the audience i hope it helped you if it did realize let me know in the comments finally thanks for watching you

Channel: Max Programming

Views: 2,278

Keywords: vite, javascript, chrome filesystem api, vitejs, beginner project, web development, web development projects, web development projects for beginners, javascript tutorial, javascript project, async javascript, html css, html css javascript tutorial, html, css, html css javascript project, html css javascript

Id: aSGV-j8dTwY

Length: 44min 29sec (2669 seconds)

Published: Mon Jun 21 2021