Using the File API on Upload Forms - JavaScript Tutorial

hey guys hey go on my name is dumb and in this video we're going to explore the file API in JavaScript alright so basically the file API allows you to work with and manage files in JavaScript so you can do things such as read files you can display images as files and you can even send the files to your server or different web servers so basically it lets you do very intelligent things to create smart web applications okay and one of the common use cases of the file API is to create smarts upload forms or at least upload forms with some form of client-side validation right so this video is going to focus on that right there so using the file API to create some sort of smart upload form alright so um let's go ahead here and create a new HTML upload form so inside the text editor let's make a new HTML form under here the action is going to go to a non existence upload script okay and the method is of course going to be post and the ink type is going to be multi-part such form data this form won't actually work but it's just for demonstration okay I'm also going to give a class of form this isn't required for you this form class is going to pull some CSS from my decoded CSS file okay and now we need the actual file input itself okay and we're gonna give an ID and name to this as being InP file alright and of course these submit button so we can just say upload files for example alright so now I can save this and refresh the browser and we are currently working with this right here so to demonstrate the file API basically once I choose a file from this file input and then select it in the console we're going to see what the file API has to offer so basically every file input form or sorry input field has something called a file list and that file list contains the selected files for that file input okay and of course those files then contain your useful information such as your name size content type and all that sort of stuff so let's go inside the JavaScript and begin on that so let's first I get a reference to the actual file input itself so let's make a new constant call this one I am a file equal to document gets element by ID I'm going to pass inside here of course finding file all right so now we have the file input now within JavaScript alright so down here we're gonna say InP file click add event listener when the file input gets changed so he selects a new set of files or a new file and we're gonna run this function inside here so for now I'm gonna just do this I'm gonna say console dialog I'm P file dot files so this files property of the file input is the actual file list so basically it returns here an array like object containing the files that have been selected on the far limit so I'm gonna save this and refresh the browser and then choose a file it's a for example thunder jpeg press open and we get here the file list inside the console and we can see it's a very similar if not identical to an array and we have a single file inside here first to expand this we see we get these details so we have last modified this is essentially the amount of seconds since the first of june 1970 it's a timestamp of when the file was last modified we have here the last modified date which is basically a data object representation of the timestamp up here but I believe it is actually deprecated so avoid using the last modified date property if you can if you want to use a date object itself then I think definitely create your own date object based on the last modified property and we have here of course the name so thumb JPEG Desai's this is in bytes so basically two six four seven eight six bytes is about two hundred and sixty four kilobytes and the type here the mime type image such jpg and this WebKit relative path I believe is not used too often and it's only supported I believe in Chrome and Firefox I think it gives you some sort of relative path to the code directory but I'm not too sure okay so we have here the file objects so this is a main one right so here we can do some client-side validation to say okay for example if the user has chosen a file that is more than 200 kilobytes then say you know you can't upload or at least give some sort of error message okay is but first we're going through what we're gonna demonstrate that but first let's just actually choose multiple files from this file input and see how the file list then looks like so back inside here let's add the multiple attribute to the end of the file input so now we can actually select multiple files in the same input I save this and refresh we now get choose files okay if I was to obviously you know click on this and choose let's just do two files here press open and now the file list of course contains the two files right there so let's loop through this file list and if a file is more than 300 kilobytes then we're going to say you can't upload it so back inside the JavaScript let's get rid of this and change this to a loop over the actual files so let's say for console file of iron key file dot files okay so now of course here file represents a single file object and we're gonna say each file dot size he's greater than 300 thousand bytes so 300 kilobytes then we're gonna say alerts let's just output the filename and say is to be max these 300 kilobytes alrighty so I can save this and refresh the browser and false to now of course choose those two files we should see Thunder JPEG passing but we should get the error or the alert message for the untitled project at five five one kilobytes press open and we get here yep the project is too big all right so of course there you go that is the file API in JavaScript just the real basics as I said you can actually go ahead and you know send the files to different servers or do a lot more with files but this is I think one of the most common uses of the file API in JavaScript alright thank you for watching and I'll see you later

Channel: dcode

Views: 24,024

Keywords: code, coding, programming, tutorial, introduction, beginner, walkthrough, guide, software, development, simple, easy, into, english, with, example, examples, developer, lecture, recording, html, html5, javascript, js, es6, es7, es8, new, feature, features, file, upload, uploading, files, input, form, method, post, get, enctype, content, type, api, drag, drop, thumbnail, validation, size, name, filename, validate, filelist, blob, websockets, ws, websocket, web, socket, website, application, app, client, server

Id: lbb4FS_mjU0

Length: 7min 47sec (467 seconds)

Published: Mon Mar 11 2019