{"id":134,"date":"2011-05-10T09:30:32","date_gmt":"2011-05-10T15:30:32","guid":{"rendered":"http:\/\/timothypoon.com\/blog\/?p=134"},"modified":"2016-02-19T09:05:53","modified_gmt":"2016-02-19T15:05:53","slug":"ajax-uploading-with-html5s-file-api","status":"publish","type":"post","link":"https:\/\/timothypoon.com\/blog\/2011\/05\/10\/ajax-uploading-with-html5s-file-api\/","title":{"rendered":"AJAX Uploading with HTML5’s File API"},"content":{"rendered":"

Prior to HTML5 and its File API<\/a>, getting media from a user was a somewhat sordid affair. You generally either had a static page with an <input> element of a <form> posting to a processing file or utilized some third party script that relied on a Flash bridge<\/a> or <iframe> shenanigans<\/a> to asynchronously get the file where it needed to go.<\/p>\n

This leads to things like this demo<\/a> and how you can drag ‘n drop (‘n upload)<\/a> files with Gmail. Seeing as how I was tired of doing the aforementioned Flash or <iframe> bullhonky, I decided it was time to get the ball rolling for myself.<\/p>\n

Accessing the Files<\/h2>\n

It’s actually surprisingly simple to see what a user has chosen to upload in a <input> (of a file type, of course). You can access all of the vital pieces of information through JavaScript once they’ve been selected, and I say “they” because if you specify the multiple<\/strong> attribute in the <input>, you can then select multiple items:<\/p>\n

1
2
3
4
5
6
7
8
9
<\/div><\/td>
document.getElementById<\/span>(<\/span>'file-input-element'<\/span>)<\/span>.onchange<\/span> =<\/span> function<\/span>(<\/span>)<\/span>{<\/span>
\n    if<\/span>(<\/span>this<\/span>.files<\/span>.length<\/span> <<\/span> 1<\/span>)<\/span> return<\/span> false<\/span>;<\/span>
\n    for<\/span>(<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> this<\/span>.files<\/span>.length<\/span>;<\/span> i++<\/span>)<\/span> console.log<\/span>(<\/span>this<\/span>.files<\/span>[<\/span>i]<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span>
\n\/**
\n * name - file name
\n * size - file size in bytes
\n * type - file MIME type
\n**\/<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

Aside from the attributes, there are also some pretty sweet functions like getAsDataURL()<\/em> and getAsText()<\/em> which can have some cool uses (such as dynamically loading an image as a CSS background image in data form), but we’ll have to save that for another day. All we need right now is access to that files array.<\/p>\n

Uploading the Files<\/h2>\n

It starts pretty much the same as any other AJAX data transfer, which is with a XMLHttpRequest<\/strong> object. The only difference is that since usually everything I do is with a GET request, I just put any key-value pairs in the URL and access the information server side. However, since the file data may (and probably will) exceed the URI size limit<\/a>, it’s best to go with POST.<\/p>\n

So then you may be asking “how do we get the files to go along with the XHR request?” It’s actually quite simple: just use a FormData<\/strong> object<\/a>.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
<\/div><\/td>
var<\/span> xhr =<\/span> new<\/span> XMLHttpRequest(<\/span>)<\/span>;<\/span>
\nxhr.upload<\/span>.addEventListener<\/span>(<\/span>'progress'<\/span>,<\/span>function<\/span>(<\/span>ev)<\/span>{<\/span>
\n    console.log<\/span>(<\/span>(<\/span>ev.loaded<\/span>\/<\/span>ev.total<\/span>)<\/span>+<\/span>'%'<\/span>)<\/span>;<\/span>
\n}<\/span>,<\/span> false<\/span>)<\/span>;<\/span>
\nxhr.onreadystatechange<\/span> =<\/span> function<\/span>(<\/span>ev)<\/span>{<\/span>
\n    \/\/ Blah blah blah, you know how to make AJAX requests<\/span>
\n}<\/span>;<\/span>
\nxhr.open<\/span>(<\/span>'POST'<\/span>,<\/span> url,<\/span> true<\/span>)<\/span>;<\/span>
\nvar<\/span> files =<\/span> document.getElementById<\/span>(<\/span>'file-input-element'<\/span>)<\/span>.files<\/span>;<\/span>
\nvar<\/span> data =<\/span> new<\/span> FormData(<\/span>)<\/span>;<\/span>
\nfor<\/span>(<\/span>var<\/span> i =<\/span> 0<\/span>;<\/span> i <<\/span> files.length<\/span>;<\/span> i++<\/span>)<\/span> data.append<\/span>(<\/span>'file'<\/span>+<\/span>i,<\/span> files[<\/span>i]<\/span>)<\/span>;<\/span>
\nxhr.send<\/span>(<\/span>data)<\/span>;<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

You might be wondering why not just use the FileReader interface<\/a> and upload with something pre-built like the jQuery $.ajax()<\/a> method, and you’ll find the answer in the progress event listener; the $.ajax() method and the like doesn’t allow for it and I really want to display an upload progress bar, dammit!<\/p>\n

Is that it?<\/h2>\n

Yeah, that’s it. Pretty easy, right? On the server side, the files are accessed just as if they were uploaded via a form and POSTed (in PHP’s case, they’re located all in the $_FILES array). I bundled it all up in a nice little JavaScript object which you can find over at my GitHub<\/a> complete with options and some helpful methods. Have fun with it and be sure to leave a comment if you think of something I could\/should change.<\/p>\n

View the demo<\/a> (requires an HTML5-capable browser). I hacked together my own version of a <progress> element since at the time of this writing, only WebKit browsers have it sufficiently implemented (though I can’t seem to figure out why it doesn’t fully function as expected in Opera).<\/p>\n","protected":false},"excerpt":{"rendered":"

Prior to HTML5 and its File API, getting media from a user was a somewhat sordid affair. You generally either had a static page with an <input> element of a <form> posting to a processing file or utilized some third party script that relied on a Flash bridge or <iframe> shenanigans to asynchronously get the file where it needed to go. This leads to things like this demo and how you can drag ‘n drop (‘n upload) files with Gmail. Seeing as how I was tired of doing the aforementioned…read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[28,27,16,18],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-code","tag-ajax","tag-file-api","tag-html5","tag-javascript","et-no-image","et-bg-layout-dark","et-white-bg"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p462yg-2a","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":7,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/timothypoon.com\/blog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}