My ugly mug

Hi, I'm Thomas Cannon!

I work on Freckle with Amy Hoy and Thomas Fuchs, and I teach people how to add an extra layer of polish to their work. Previously I worked for BMW and Clemson University, and have a bunch of smaller apps I tinker with on the side. Follow me on Twitter!

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. 🎉

Want more tips on writing better Javascript? Did I missed something? Need help? Enter your email below, I'd love to hear from you (you'll also get my free Chatroom Survival Guide)!