Join Joe Marini for an in-depth discussion in this video What is the File API?, part of HTML5: File API.
Let's start by talking about what the HTML5 File API actually is. It provides a way to interact with local files on the user's device. Now, up until recently, this is a capability that only native applications have had. Of course, there was a way to upload files. There has always been the <input type="file"> element, in which you could select the file and that would send the file off to the web server from within a form. But this provides a way via script to actually read file content and work with it and discover information about files.
So you can work with either the <input type="file"> element, which we've had for a while, or you can use drag-and-drop, and in this course we'll see examples of working with both. The HTML5 File API is a W3C specification. It's not final yet; it's still in work in progress. I've got the address up--and actually we will visit this back in just a moment-- but that's the official specification for the File API at the W3C. The File API actually consists of three different pieces. There is the FileReader, the FileWriter, and the FileSystem APIs.
Now, in this course we're only going to be dealing with the FileReader, because the other two are not widely implemented and they're still very experimental. So the FileReader is what we're going to be focusing on in this particular course. Using the FileReader API, you can do things like determine file information, the size, name of the file, what its MIME type is, et cetera--that kind of stuff. And you can also access the contents of files, and as I noted, you can even do it through drag-and-drop or selection. You can also access portions of contents of files.
So what can you do with the FileReader API? Well, you can do things like perform client-side file operations. You can limit the size of uploads because you can find out information about the size of a file. So if you want to prevent the user from trying to upload 40 gigabyte file, you can do that. You can restrict the kinds of files that can be uploaded to a server. So if your server script is expecting to only find text files or image files or some combination, your local client- side script code can restrict the kinds of files that can be uploaded. You can generate thumbnail versions of images that are about to be uploaded, because you can read image contents either as a data URL or binary and generate thumbnails, and you can show them to the user and show them what's about to be uploaded.
You can check to see if the modification date of a local file is before or after a certain date. So, you can check the date of a file and see if it's new or old or...that kind of stuff. You can parse the content of files locally to get detailed information. So for example, if you're working with files of a certain type, whether they're media files or images or PDF files or something, you can look inside the file and figure out how big it is, how long a movie is, that kind of thing. And you can modify file contents before they are sent off to the server.
So for example, if someone selects a text file and you read the contents, you can do things like spell checking and spell correction before the content is sent off. So we'll see examples of several of these kinds of scenarios as we move throughout the course. But for now, let's take a look over at the FileReader API spec. So this is the specification for the File API, and you can see it's on the W3C's website. Now, the latest version as of this recording is October 20th, but as I said, this is a Working Draft and so it's being modified all the time; it's not yet a candid recommendation.
But if you scroll down, you'll see that there are various different interfaces contained within the specifications, so if you're looking for canonical W3C- approved information about the latest version of the file specification, here's where you can go. So I want to point this out to you. All right, having taken a look at the spec and having taken a look at what you can do, let's actually take an overview of the File API Interfaces.
- Providing an overview of the File API interfaces
- Using the File Input form element
- Working with multiple files
- Using drag and drop
- Reading data as text
- Using File API event handlers
- Reading file slices