File API

By  on  

Working with file uploads, especially on the front end, was always a hassle.  We didn't use to be able to drag and drop files, complete AJAX uploads, provide multiple files, and hell, we couldn't get any information about the file until it hit the server; you'd need to upload the damn file before you could reject it!

Nowadays we have the File API which provides us access to file information via JavaScript and an input[type=file] element.  Let's have a look at how the File API works!

Accessing Files

To get the list of files mapped to a given input[type=file], you use the files property:

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
	console.log(uploadInput.files) // File listing!
});

Unfortunately the FileList doesn't have a forEach method like Array so we'll need to do some old school looping through the FileList:

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
  console.log(files[i]);
}

It's important to note that FileList does have a length property.

Getting File Information

Each file in the FileList provides a good set of information on each file, including file size, MIME type, last modified date, and name:

{
	lastModified: 1428005315000,
	lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
	name: "profile.pdf",
	size: 135568,
	type: "application/pdf",
	webkitRelativePath: ""
}

What's nice about getting this file information is that you can do some very basic validation before uploading the file.  For example, you can validate MIME type or total file size:

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {
	totalSize += files[i].size;
	if(totalSize > maxAllowedSize) {
		// Notify the user that their file(s) are too large
	}

	if(files[i].type != 'application/pdf') {
		// Notify of invalid file type for file in question
	}
}

Total file size is too large or a file doesn't pass the test? Now you can present the user with a message without needing to upload and assess the file first.

That's my quick look at the File API. It's a sweet little API that can save you and your user some wasted upload time. There's lots more than can be done with the file API, much of which you can find on MDN.

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

Incredible Demos

  • By
    Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3

    Row highlighting and individual cell highlighting in tables is pretty simple in every browser that supports :hover on all elements (basically everything except IE6). Column highlighting is a bit more difficult. Luckily MooTools 1.2.3 makes the process easy. The XHTML A normal table. The cells...

  • By
    Image Reflection with jQuery and MooTools

    One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your...

Discussion

  1. MaxArt

    Keep in mind that the type property isn’t reliable, because browsers normally base the value solely on the file’s extension. One can rename a .php file to .pdf (for example) and it wouldn’t be noticed by the File API.

  2. Ickata
    [].slice.call(uploadInput.files).forEach(function(file, i, files) {
    	
    });
  3. Even better:

    [].forEach.call(uploadInput.files, function(file, i, files) {
    	
    });
    
  4. in ES6 :

      var uploadInput = document.getElementById('upload');
      Array.from(uploadInput).forEach(function(i) {
        ...
      });
    
  5. Khaled

    what is the file size upload limit ?
    cause Im trying to upload a 50MB file ,but it’s not working

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!