Custom File Upload Button with FileList - HTML, CSS & JavaScript Tutorial

hey guys hey going in this video I'm gonna be showing you how to create a custom file upload button from scratch using the file at least JavaScript object as well as a bit of HTML and of course CSS so basically this right here is the final result we've got this custom a file upload button and it's got support for not only multiple files but also Internet Explorer 11 and we can see if I was to click on this button we of course get the file selection window I can choose for example three files just like this and press open and we can see each file name is displayed next to the button separated by a comma okay so this is like an improved version or a better alternative to my previous video from two years ago which created a custom file upload button with regular expressions instead of the file list object so definitely this video right here is the better alternative to the regex based approach so anyway let's go inside this tab and create the custom file upload button from scratch so inside the HTML we can see I've got this index.html file and it's a basic HTML skeleton so the first thing to do is to create the HTML structure for the custom a file upload button so let's go below the h1 tag and creates a new div with a class of file - upload just like this and basically this div is going to be the main container fall of the HTML elements which make up the customer file upload button so firstly we need an input with a type of file so this right here is going to be the actual file input and this one is going to be submitted to the server side when you actually submit the HTML form so basically we're going to be hiding this actual input type file and instead we're going to be clicking on it virtually using JavaScript so anyway let's go inside here and set the name and the ID we can say my farm and if you want PHP support for multiple file so basically if you want to upload multiple files and also support PHP you want to add the two brackets at the end of this name because that's what PHP requires in order to support multiple file uploads also if you want multiple file uploads definitely add the multiple attribute to the end of the input type file we can also say class and make this file upload underscore underscore input okay so as I said this input right here is going to be hidden behind the scenes and instead we're gonna be creating an actual button just like this and when this button gets pressed that is when this one right here is going to be virtually clicked to of course trigger the default selection window we can say I type and make this button and also give a class of file upload file upload underscore underscore button and also as usual I'm using the block element modifier CSS class naming convention but you can of course name these classes whatever you'd like for the button text we can simply say choose files just like that to suggest they can choose multiple files also if you don't want support for multiple files just simply remove these two brackets as well as this multiple attribute and of course adjust your text accordingly but let's go back to the multiple file version we can now also go down here and add the HTML for the file upload label this is going to be a simple span element with a class of file upload underscore underscore label inside here we can say for example no files selected just like that later on we're going to be using the JavaScript to actually insert this text instead of it being rendered in the HTML I'm gonna save this here and refresh the browser and we can see we get this result right here we of course get the actual input type file we get the the custom button here and also the label just like that so let's now go inside the CSS and hide this button or hide this input field and also style off the button and also the label so back inside here let's head up to these style tags inside the head and we can firstly target the main container the file - upload class inside here we can say display and make this inline - flex the reason for the Flex box is to create an easy two column layout okay and the reason for the inline is so the actual file upload our container doesn't take up the entire width of its container okay we can then say our line items and make this center another benefit of flex box and this right here is going to vertically center the elements within the container we can say font size and make this 15px this will be the base font size for the file upload component or container okay we can then say file upload underscore underscore input we can simply say display and make this none to hide the default input type or file as I said this is still going to be submitted to the server side to actually do the file upload but a display of none is not going to prevent it from being submitted with the HTML form we can now target the actual file upload button right here so you can say file upload underscore underscore button and firstly we can say WebKit appearance and make this none this is going to remove some of the default styles applied on iOS and Safari devices we can make the background I'm going to make this zero zero nine eight seven nine that is the D code GREEN color of course make this background color whatever you like we can say border and make this 2px solid and zero zero seven four and then five D this is a darker version of my background color we can then say border-radius and make this 4px for some rounded edges we can say outline and make this nun and padding at 0.5 a.m. top and bottom and zero points atm left and right so basically 0.5 multiplied by the current font size of 15px so basically it's going to be seven point five pixels for the painting top and our top and of course whatever that is for left and right and also forgot to mention that this outline of nun is gonna remove the default blue border or outline on many mobile devices when you actually press on the button we can also say margin right and make these 15px to add some space between the button and also the label we're gonna insert a color and make this white our two contrast nicely with the background color we can say font size and make this one am so one times 15 or 15 px and a font family of sans-serif later on I'm gonna be showing you how to import your own custom fonts but for now we can make this sans-serif we can say font weight and make this bold and also a cursor of pointer just to remove sorry I just to display a point our cursor when hovering over the actual button we can then say file upload button then the active pseudo class just like this to change the background color when the button gets pressed on you can say background and make this zero zero seven four five D the exact same color as the border color so now saving this I can to saving saving this and then refreshing gives me this result right here we can see the button is start perfectly fun and if I press on it we can see the background color changes to the same background color or same color as the border okay so so now we can move on to styling up the actual label so for this back in the CSS we can target the file upload label class and we can say firstly a maximum width of 250px and this is of course to prevent you know if you've got multiple or many many files selected we don't want that list to appear you know very long so cap the width that 250px a font size of 0.9 5 a.m. so 95% of the current font size and a text-overflow:ellipsis an overflow of hidden and a white space of nowrap so these three properties are going to create the dot dot dot ellipsis effect when the width goes more than 250 PX or the actual text is going to go more than 250 PS so I'm going to save this here and refresh not much has changed however back in the HTML let's just copy and paste this text right here a few times so copy this and paste it a few times save this and refresh and now we can see we get the ellipsis effect the dot dot dot the three dots when the text gets too long and also the max width makes it responsive so it falls to resize the browser we can see the text is actually gonna get smaller as we resize so definitely another benefit of that max width and also the ellipsis dot dot dot so now we are done with the CSS for the customer file upload button we can now move on to the JavaScript so let's go back inside here and just minimize this style tag real quickly and go down to the JavaScript so basically the way it's gonna work as I said is essentially since this is now hidden we're gonna be saying when this button gets pressed on then we're gonna make it as if this one was pressed on so we're gonna be virtually I'm gonna be virtually clicking this input field when this one gets pressed on so to achieve that we need to select ever single element with a class of file upload button in this case we've only got one so in the Java Script we can say array dot prototype dot for each dot call inside here we can pass in document we've got query selector all and pass in here the class of file upload underscore underscore button so right here the reason for this array prototype for each and then call is for Internet Explorer support if you don't want Internet Explorer support don't use this but instead you can simply say cout is select all and you can say dot for each just like this so essentially Internet Explorer doesn't have support for this for each method on the query selector or result so this is the actual workaround okay basically we're calling the for each method on the array prototype for each one of the elements selected in this file upload button and we can say right here function and then pass through the button just like that so now this function is going to execute for each file upload button class and this button refers through the actual button element itself okay so let's now inside here we also got the actual button we now need to get a reference to this input field and also this span let's just go back and make this back to its normal text so anyway we need a reference once inside here to this input and also this span so we can say Const and we can say hidden input is equal to button dot parents elements dot query selector and pass in here file - upload underscore underscore input so basically we're saying here we've got this button which refers to this button right here then we're saying get the parents element which is this one right here we are then saying from this parent element I want to say query selector and select the elements with a class of file upload input of course this one right here so now this hidden input refers to this one right here let's do the same thing for the label so I'm gonna duplicate this line make this constant called label equal to this time round put label caste class okay so now we have these two elements we can now add some default label text so essentially this text right here needs to come from the JavaScript since we're going to be modifying it and if the user chooses to not select a file we want this text to be displayed once again so let's go here and say Const default label text is equal to no files selected so now we can actually insert this this constant value into this element using the JavaScript so let's remove this right here okay and instead add it through the JavaScript so down here you can simply say sets default texts set default text or label so label dot text contents is equal to default label text and also label dot title so setting the title attribute to the same value no file selected essentially this title is going to appear when I hover over the actual span so now saving this and then refreshing we can see we once again get no file selected but if I was to harder over this label we can see now the title attribute adds that hover text right there okay so now we can move on to the main chunk of this video which is going to be the actual file upload button to choose the file so back in the JavaScript let's say button dot addeventlistener and pass in click right here and then run this function so basically when the button gets pressed on want to say hidden input dot click so of course this one refers to this one right here and the dot click method is going to virtually click on this input field which will of course then trigger the file selection dialog window so now saving this and refreshing then clicking on the button we can see now we get the file select window that's working perfectly fine so now when I choose these files and press open we want this to update with the label of course to display each file name separated by a comma so for that let's go back inside here and we're going to say get an input dot add event listener we're going to listen for the change event and then run this function so basically every time the input changes we're going to run this function right here so for this we need to get a comma separated list of the choose of the chosen filenames so let's say console mod first up here I'm gonna say console dot log and we're gonna say hidden input dot files so basically this files property on the hidden input or the input type file is going to be the actual file list object so saving this and then refreshing and then choosing for example two files just like this when I press open it's going to trigger the change event and then run that function inside the console we can see here we get a file list expanding this gives us these two files of course founder jpg and of course untitled project so basically now we're going to be extracting this name property from each one of these files and then of course adding a comma to separate those okay so let's go back inside here and we can say Const file name list is equal to array prototype dot map dot call once again this one here is an internet explorer our workaround for the map function okay we can say hidden input dot files inside here and then run this function for each one of those files okay once again if you don't want Internet Explorer support you can simply say array dot front and passing hidden import files and then you can say dot map just like this and do the exact same the exact same thing just like that but for now let's go back to the Internet Explorer supported method this one right here and we're gonna say return file a dot name so essentially running this function right here for each one of those files and then we're going to be returning the file name of course the map function is gonna run for each element inside the array and then returned with an updated value so basically turning the file list into an array of strings close through console.log the file name list just like this and then save this and then refresh then choose two files once again press open we get here an array of two strings for each file name so now we can simply just join by comma so back inside here let's say label the text content is equal to filename list dot join so the drawing method is going to join the array and turn it into a string with this right here as the delimiter so a string with a comma and also a spa is to separate put a space between each file name if this fight here are returns and empty array it's basically if there was no elements or no files selected we can say the two pipes right here and then say default label text so basically if this one is false II on empty array so no files have been selected then we're going to be defaulting to the default label text the no files selected and this one here comes into play if the user decides to unselect the files they have chosen we can then say label title is equal to label text content so basically we're gonna be borrowing this value right here which was just set for the title and that is all for the JavaScript I'm gonna save this here and then refresh and then choose on two files and press open we can see it works perfectly fine and also the title attribute the hover also displays the two files so now let's unselect or choose no files and press open and now it says if I can actually achieve that can you do that I don't know there you go see press cancel so sorry so you press cancel and it's gonna deselect your files and this time they get no file selected and of course the the title also says no files selected okay so now I want to show you how to add your own custom font so for that as usual we're going to be using fonts google.com so head over to this website right here it contains a bunch of our free fonts to use for your web projects so now just go inside here and select preferably a sans serif font just like this in this case I'm going to be using quicksand so I'm going to find quicksand and right here I must do a search for it so do a search for quick sand there it is so we're gonna press the plus button right here and then inside here go to the customize section and make sure I select regular and also bold the reason for bold is because we're using font-weight:bold for the file upload button so definitely definitely choose the bold font way if you're using font-weight:bold inside your CSS once these are selected go back to the embed section and also just copy and paste this link HTML element right here so copy that and paste it inside the head just like that and now inside here we can simply say file upload button and set quicksand as the font and also for the label do the exact same thing so font family and quicksand right there save this and then refresh and now of course we get the quicksand font set on the actual button as well the reason why this didn't change is because I'm using quicksand as my default font for all of my videos so for you this should have been censored also but now it is your custom font and that is how to create a custom a file upload button from scratch using a file list thanks for watching guys and I'll see you later

Channel: dcode

Views: 29,572

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, english, with, example, examples, developer, lecture, recording, how, to, web, website, html, html5, css, css3, javascript, js, es6, new, features, file, files, multiple, filelist, list, form, submission, upload, filename, access, style, styling, stylesheet, nice, design, click, event, addeventlistener

Id: SE38zdOOrAQ

Length: 23min 33sec (1413 seconds)

Published: Mon Oct 07 2019