HTML File Uploads in 5 Minutes (Plus Some JavaScript Features)

HTML forms have to be configured appropriately to be able to handle uploading of files so in this video let's see how to set up an HTML form to handle file uploads correctly while using the ink type property of multi-art form data and at the end of that we'll take a few extra minutes to show some additional features that you can add by using JavaScript like a preview of your video after the user has selected which video they want to upload all right so I'm in vs code and I have a basic Astro project started here I'm using Astro for a live reloading server but it doesn't really matter about the framework cuz we're just using HTML and JavaScript in this demo so we'll need to start out with a basic form and our form will have a couple of different properties now typically we're probably used to the action which is the URL that we're going to send the request to we'll come back to that in a second then we might also be used to the fact that there is a method associated with a form as well by default this is set to get we'll come back and update this to post in a minute but I just want to show you how this is going to work if we did have this configured as a git request now inside of here we'll have a label this label is going to be for the video input and it would just say video now we are specifically talking about videos in this case but what we're doing can be used for any type of file that you want to we're just going to customize this for video from there we're going to have an input and instead of being a type of text we're going to have a type of file this is going to signify that when the user clicks the button to choose this is going to signify to the browser that when the user clicks this inut it's going to open up the file dialogue for them to choose a file and the last thing we'll need is a button to actual actually handle the submission of this file so we'll call this submit and then I'm going to add a few different classes in here with Tailwind just to give some basic style so I'll just paste those in all right so I pasted in a few basic styles with Tailwind we can see what this looks like and let's just see if we submit now what is going to happen so we can go in and choose a file and you can see that we see all these MP4s right now it also shows us all the other types of files as well which we want to fix so we'll come back to that in a minute let's select a file notice it kind of displays the name here and then if we try to submit what's going to happen well we click this submit and notice that it changes the URL in here and it has an empty query pram for a question mark but no actual name associated with it so for our input we need to give this a name of video in this case and then what's going to happen is when we choose this input now when we choose our file and submit this is going to be passed into the into the URL as a query parameter associated with the name of video and then the value is going to be the name of the file now this is where the limitation of form submissions comes in with HTML is we don't want to submit this as a get request we want to do this as a post request but we also want to be able to submit the actual data for the file and to do that we have to use a property called ink type and then we have to set this to multiart form data this is what allows us to submit files from a form now we also need to to submit this as a post request and now we're going to have a post request that is going to submit this data to a server and also include the file itself now we still don't have an action to find so I'm going to paste in an action that's going to submit this to a local backend API that I have running so that we can actually see this work all the way through so just really quickly this is a bun project which is pretty neat I did a video talking about bun versus node.js the other day I'm going to be doing more with this but basically what this does is it uses a package called molter to handle uploading this video so molter can upload this to a local directory inside of the project or in this case what I do is get a reference to that in memory and then I upload this to Zeta which I'll show you in a second so let's go back and let's refresh this page and let's go and now choose a file and open this and then let's go ahead and submit and you can see up here that this is loading and that's because it's sending it to the backend server which takes time and then the should when it finishes redirect us to a page that says video uploaded nice so this ran through all of the front end to upload that video to the back end and then it uploaded that from there to Zeta and we can see this inside of our table under the video table we have a new record that was created that also has a file attachment to it which is for our video now this is one of the cool features of Zeta now is it has built-in video or just file in general support so you can upload files directly to your given records I'll be working with this a lot upcoming in the next couple of months as I'm building a project in public to display all of this so those are the basics of handling HTML file uploads with pure HTML let's just recap this really quickly we have an action which is the URL that we're going to send this post request the method to we also need to make sure that we annotate this with the ink type property being multiart form data which allows us to actually get the binary data for the file that we're looking to upload and we can upload that to the server we then have an input type of type file and we give it a name and that's how we can refer to that property on the server when when we receive this now I mentioned there was one thing one additional thing that we wanted to do to prevent users from choosing other types of files than videoos so in this case we specifically looking to only allow users to upload video files so we can add an accept property and the accept property is it a way for us to Define what type of files the user can upload using this input so in this case we're going to do video/ star and this is basically going to imply we only want the user to be able to upload different types of video formats so if we come back to our running application at Port 4321 and we go to choose a file we can see all of the MP4s are available but if we go back to a directory we don't have access to PDF or zip or MP3 Etc it's only allowing us to have access to MP4 files which is exactly what we want so we can add on that accept property which then adds a little bit more constraint to what the user is able to actually upload so if you're just looking to upload a file to an existing server using HTML that's all you need but what if you wanted to add some JavaScript to add some additional functionality to this process the thing that comes to mind is after the user chooses a file how do we then display the file that was chosen well let's add some additional HTML and JavaScript and see how to do that so underneath our form I'm going to add a video tag and the video tag has a source property which we're going to update dynamically basically after the user chooses the file we're going to update that Source property so that it can display the actual file that was chosen now in this case I'm I'm going to add a few different classes on here the most important is aspect of video and this is a tail one class to give it a 16x9 ratio and then we'll set the width to full to take up the entire container we'll also include the controls in here so we want that to happen and then we'll have a piece of text your browser does not support the video tag this is basically a default so if the video does not display correctly it will show this and that's only in case the browser does not support the video tag which is not very likely so if we save this now we'll see that we now have kind of a preview or a placeholder for a video now we need to actually go and get a reference to that inside of JavaScript now the cool thing about Astro is you can add script tags just like vanilla JavaScript right inside of your Astro component alongside of your HTML now from here we're going to need to get a reference to a few of our different Dom elements so that we can work with them so we have our video element we have our file input and we have our video form now let's add for our file input let's add an event listener and basically we want to detect when the user has changed the input that's been chosen so we'll add a change event and then we'll add a callback function that has the event inside of it now we want to do a little bit of a check to make sure this uh user has actually chosen a valid file so we'll look at event. target. files we'll make sure that exists and we'll make sure that event. target. files array has an initial property or it has an actual file set into that array so if that is the case then we want to set the video element it will set its source property to the URL from or the the URL path to the object that the user to the URL path to the file that the user chose now this is going to come from the URL object and we'll call create object URL and this will come from event. target. files and then the first file that was selected in this case we're only allowing one file to be selected so it should be at the first index in the array from there we'll then tell the video to load or the video tag to load the video from the source that we just added all right we've got a little bit of some additional logic where it says that events. Target could be null so we could add in some checks in here to see if those exist and then it's telling us that it may not have a property of files in this case we know this will because the type is of of input file now the last thing we want to do is make sure that we have our file input it has an ID which I think we forgot so on the file or the input up here we need to add an ID of file input and we'll also need to add the ID to the video player as well so the video ID here will be video L and notice that we're quering these elements down here below where we have video L file input and then we'll talk about the video form in a second so we can go ahead and add that ID as well all right so we'll save this we should now be able to test this out let's come in and choose a file and this will now show the preview of this file right inside of the video player so that we can show it there now the last thing you might be interested in doing in JavaScript is handling the event submission in JavaScript instead of just having the HTML form handle it directly you can then use this to show a loading state for while that video file is being submitted to the server as an example so let's see what that would look like we can take our video form and we can add an event listener and we can add a submit event listener and we can have our callback function and this callback function will have the submission event and in this case the first thing we'll do is make sure to call event.prevent default this will stop the actual HTML form from doing what it does by default now from here we'll want to build a fetch request we'll use the fetch API to send this request and then inside of here we want want to we want to tell it which URL to send this to well in this case we can actually get the URL from the action property of this form because we've already defined it inside of this action so we can grab it from the video form. action and the second parameter we'll send are our options now in this case we want to make sure this is a post method so we're submitting this as a post and then we're going to set our body to a new instance of form data so we'll create the form data from the video form and then that will be all the information that we need to submit to the server for this video submission so let's just save this and see if that will work as well let's also add a log in here for submitting video just to make sure we see this in the console to see that it's working inside of our front end JavaScript so let's go into the console just so we have that up let's choose a 9 by6 video let's go ahead and submit this it says submitting video this network request should be loading behind the scenes see the pending there and then when this is done we should be able to see the response come back saying that that file has been uploaded so if we look in the payload we see the video has been sent as binary and now that this is finished we can see the response has come back as video uploaded now the benefit of being able to handle this submission with JavaScript and the fetch apis you could show like a dynamic loading State on here and you don't have to do a full page refresh but that's up to you you can either use just basic HTML or you can handle that submission inside of JavaScript and or add some JavaScript logic to be able to display a preview of the video after the user has selected it so that is file submissions in HTML in 5 minutes and a little bit of JavaScript after I mentioned in this demo that I was using Astro which is one of my favorite Frameworks and I actually have a course on Astro at astr course. deev where you can learn to build static sites and serers side rendered sites and do everything to take advantage of one of what I think is one of the coolest JavaScript Frameworks available right now so if you're interested in that you can check it out at astr course. deev in the meantime I'll be doing a lot more content on video uploads as I'm building in public using Zeta and then a product called Century as well so if you have any ideas for other things you'd like to see relevant to handling video uploads let me know in the comments below make sure to check out for more videos coming in the future and I'll catch you next time

Channel: James Q Quick

Views: 19,366

Keywords: html file upload, upload files javascript, upload file fetch request, html file input, html multipart form-data, html forms, html form input

Id: iAxUpo0aJSk

Length: 12min 44sec (764 seconds)

Published: Thu Oct 19 2023