AJAX File Uploads using HTML5 (with examples for the major libraries!)

If you ever tried building rich internet application, you probably tried letting your users upload files seamlessly using AJAX.

But for the longest time, this was impossible without nasty Flash plugins, iframe hacks, or arcane magic. We had to hang our heads in defeat and sully beautiful, simple code.

It’s been possible for a while

Think about it: drag and drop avatar placements, live preview file uploads, Slack’s “drop a file to upload!”. It’s AJAX! Slack’s file uploads are made of AJAX!

Didn’t realize it? Neither did I. Every time I’ve wanted to do this in the past couple of years, I would spend hours digging through Google results, chasing long-dead threads across the internet.

See… AJAX file uploads have always been such an important topic that Google’s flooded with old hacks. And once browsers actually added native support, there wasn’t enough promotion to override all these old threads. So if you take a wrong turn, you’re screwed.

In short: it’s now possible to submit file uploads using AJAX; But you might have never noticed because the old hacks still come up in Google

The Code Samples

I’m tired of seeing old hacks and ugly file upload forms. So I put together basic examples for the major JS libraries and even vanilla JS!

They’re barebones, containing only the code you’ll need to submit any form with a file upload using AJAX.

Tweak them, turn them into modules, do whatever you want! Let’s just make our apps awesome.

jQuery 3.0

$(document).ready(function(){
      //based on: http://stackoverflow.com/a/9622978
      $('#ajax-upload').on('submit', function(e){
        e.preventDefault();
        var form = e.target;
        var data = new FormData(form);
        $.ajax({
          url: form.action,
          method: form.method,
          processData: false,
          contentType: false,
          data: data,
          processData: false,
          success: function(data){
            $('#result').text(data)
          }
        })
      })
    })

See the Pen jQuery 3.0 AJAX Form with File Upload Example by Thomas Cannon (@tcannonfodder) on CodePen.

jQuery 2.1.4

$(document).ready(function(){
      //based on: http://stackoverflow.com/a/9622978
      $('#ajax-upload').on('submit', function(e){
        e.preventDefault();
        var form = e.target;
        var data = new FormData(form);
        $.ajax({
          url: form.action,
          method: form.method,
          processData: false,
          contentType: false,
          data: data,
          processData: false,
          success: function(data){
            $('#result').text(data)
          }
        })
      })
    })

See the Pen jQuery 2.1.4 AJAX Form with File Upload Example by Thomas Cannon (@tcannonfodder) on CodePen.

Zepto

$(document).ready(function(){
      $('#ajax-upload').on('submit', function(e){
        e.preventDefault();
        var form = e.target;
        var data = new FormData(form);
        $.ajax({
          url: form.action,
          method: form.method,
          processData: false,
          contentType: false,
          data: data,
          processData: false,
          success: function(data){
            $('#result').text(data)
          }
        })
      })
    })

See the Pen Zepto AJAX Form with File Upload Example by Thomas Cannon (@tcannonfodder) on CodePen.

Prototype

$(document).observe('dom:loaded', function(){
      $('ajax-upload').observe('submit', function(e){
        e.preventDefault()
        var form = e.target
        var data = new FormData(form)
        new Ajax.Request(form.action, {
          //Needed to work with this test server
          requestHeaders: {"X-Prototype-Version": null},
          contentType: null,
          method: form.method,
          postBody: data,
          onSuccess: function(response){
            $('result').update(response.responseText)
          }
        })
      })
    })

See the Pen PrototypeJS AJAX Form with File Upload Example by Thomas Cannon (@tcannonfodder) on CodePen.

Vanilla JS

document.addEventListener("DOMContentLoaded", function(){
      document.getElementById('ajax-upload').addEventListener("submit", function(e){
        e.preventDefault()
        var form = e.target
        var data = new FormData(form)
        
        var request = new XMLHttpRequest()
        
        request.onreadystatechange = function(){
          document.getElementById("result").innerText = request.responseText
        }
        
        request.open(form.method, form.action)
        request.send(data)
      })
    })

See the Pen Vanilla JS AJAX Form with File Upload Example by Thomas Cannon (@tcannonfodder) on CodePen.

That’s it!

I’m so happy that browsers natively support submitting file uploads using AJAX. Having to use a workaround or redo your entire UI to accommodate a standard POST was a hassle. But no more! Now we’re happy, our users are happy, and our code is a little bit cleaner. 🎉