Dropbox - async, ajax uploads with HTML5 in Sinatra

dropbox.css

#dropbox {
  position: relative;
}

#dropbox > input {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

#dropbox > input:hover, #dropbox:hover {
  cursor: pointer;
}

dropbox.js

function Dropbox(dropbox, url) {
  this.box = dropbox;
  this.url = url;
  this.queue = [];
  this.num_current_uploads = 0;

  // Add clickable file picker
  this.picker = document.createElement('input');
  this.picker.setAttribute('type', 'file');
  this.box.appendChild(this.picker);
  // Add progress bar container
  this.uploads = document.createElement('div');
  this.box.parentNode.insertBefore(this.uploads, this.box.nextSibling);

  // Optional defaults
  this.max_concurrent = 2; // Queue uploads after n concurrent
  this.max_size = null; // Max size in MB
  this.success = null; // Callback on successful upload, passed the response body
  this.error = null; // Callback on upload failure, passed the error text
  this.mime_types = null; // A regex to match file mime types

  var _this = this;
  // Init drag and drop handlers
  this.box.addEventListener("dragenter", function(e) { _this.drag(e, true) }, false);
  this.box.addEventListener("dragleave", function(e) { _this.drag(e, false) }, false);
  this.box.addEventListener("dragover", noop, false);
  this.box.addEventListener("drop", function(e) { _this.drop(e) }, false);
  this.picker.addEventListener("change", function(e) { _this.drop(e) })
}

Dropbox.prototype.drop = function(e) {
  this.drag(e, false);
  var files = (e.dataTransfer || e.target).files;
  for ( var i=0; i<files.length; i++ )
    this.handle_file(files[i]);
};

Dropbox.prototype.drag = function(e, active) {
  noop(e);
  this.box.className = active ? this.box.className += ' active' : this.box.className.replace(/ ?active/, '');
};

Dropbox.prototype.handle_file = function(file) {
  // Bad file type
  if ( this.mime_types && !file.type.match(this.mime_types) ) {
    alert(file.name + ' is not an allowed file type');
  // Too large
  } else if ( this.max_size && (file.size / 1024 / 1024) > this.max_size ) {
    alert(file.name + ' is too large; maximum is ' + this.max_size.toFixed(2) + ' MB');
  } else {
    file.label = this.add_label(file);
    // Enqueue it
    if ( this.max_concurrent > -1 && this.num_current_uploads >= this.max_concurrent )
      this.queue.push(file);
    // Upload it
    else this.process_file(file);
  }
};

Dropbox.prototype.process_file = function(file) {
  this.num_current_uploads += 1;
  var _this = this;
  var reader = new FileReader();
  reader.onload = function(e) {
    var buffer = e.target.result;
    var buffer_view = new Uint8Array(buffer);
    _this.upload_file(file, buffer_view);
  }
  reader.readAsArrayBuffer(file);
};

Dropbox.prototype.upload_file = function(file, file_contents) {
  var query_params = [['filename', file.name], ['mimetype', file.type], ['size', file.size]];
  query_params.push(['preventCache', rand(30)]); // Chrome fix - it caches regardless of Cache-Control and Pragma headers
  var query_string = query_params.map(function(p) { return p[0] + '=' + encodeURIComponent(p[1]) }).join('&');
  var upload_url = this.url + '?' + query_string;

  var _this = this;
  var xhr = new XMLHttpRequest();
  if ( xhr.upload ) xhr.upload.addEventListener('progress', function(e) { _this.handle_upload_progress(e, file.label) }, false)
  xhr.open('POST', upload_url);
  xhr.setRequestHeader('Content-Type', 'text/plain'); // Safari fix - it always sends application/x-www-form-urlencoded
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xhr.setRequestHeader('Cache-Control', 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0');
  xhr.setRequestHeader('Pragma', 'no-cache');
  xhr.onreadystatechange = function(e) {
    if ( xhr.readyState === 4 ) {
      // Success
      if (xhr.status === 200) {
        file.label.getElementsByClassName('percent')[0].innerHTML = '100%';
        if ( _this.success ) _this.success(file, xhr.responseText);
      // Error
      } else {
        file.label.getElementsByClassName('percent')[0].innerHTML = 'Error';
        if ( _this.error ) _this.error(file, xhr.statusText, xhr.responseText);
      }
      // Pop next upload off the queue
      _this.num_current_uploads -= 1;
      if ( _this.queue.length > 0 ) _this.process_file(_this.queue.shift())
      // Remove the label in 1 second
      setTimeout(function() { _this.uploads.removeChild(file.label) }, 1000);
    }
  }
  xhr.send(file_contents)
};

Dropbox.prototype.handle_upload_progress = function(e, label) {
  if ( e.lengthComputable ) {
    var progress = label.getElementsByTagName('progress')[0];
    progress.setAttribute('value', e.loaded);
    progress.setAttribute('max', e.total);
    label.getElementsByClassName('percent')[0].innerHTML = ((e.loaded / e.total) * 100).toFixed(0) + '%';
  }
};

Dropbox.prototype.add_label = function(file) {
  var size = (file.size / 1024 / 1024).toFixed(2);
  var label = document.createElement('div');
  label.setAttribute('class', 'upload-progress');
  label.innerHTML = '<progress value="0" max="100"></progress> <span class="desc">' + file.name + ' - <span class="percent">0%</span> (' + size + ' MB)</span>';
  this.uploads.insertBefore(label, null);
  return label;
};

function rand(n) {
  var str = '', possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for ( var i = 0; i < n; i++ ) {
    str += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return str;
}

function noop(e) {
  e.stopPropagation();
  e.preventDefault();
}

dropbox.rb

require 'sinatra'

use Rack::Static, :urls => %w[/dropbox.js /dropbox.css /theme.css]

get '/' do
  erb :dropbox
end

post '/drop' do
  File.open("/tmp/upload-#{params[:filename]}", 'w') do |f|
    f.binmode
    while buffer = request.body.read(51200) # read in 50 kB chunks
      f << buffer
    end
  end
  'huzzah!'
end

__END__

@@ layout
<!doctype html>
<html>
  <head>
    <title>Dropbox</title>
    <link href="/dropbox.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="/theme.css" media="screen" rel="stylesheet" type="text/css" />
    <script src="/dropbox.js" type="text/javascript"></script>
  </head>
  <body>
<%= yield %>
  </body>
</html>

@@ dropbox
<div id="dropbox">Drag and drop files, or click here...</div>
<div id="log"></div>

<script>
  var box = document.getElementById('dropbox')
  var log = document.getElementById('log')

  var dropbox = new Dropbox(box, '/drop')
  // Optional settings and callbacks
  dropbox.max_size = 10 // MB
  dropbox.max_concurrent = 2 // Do not upload more than two files at a time
  dropbox.mime_types = /(png)|(jpe?g)|(gif)/i // Only allow pngs, jpgs, and gifs
  dropbox.success = function(file, response) {
    log.innerHTML += '<p>' + file.name + ' was successfully uploaded: ' + response + '</p>'
  }
  dropbox.error = function(file, status, response) {
    log.innerHTML += '<p>' + file.name + ' failed to upload: ' + error + '</p>'
  }
</script>

theme.css

#dropbox {
  padding: 15px 0px;
  border: 2px solid #ddd;
  text-align: center;
  color: #999;
  font-size: 1.3em;
  font-family: Arial, sans-serif;
  transition: background-color 0.15s;
}

#dropbox.active {
  border-color: #3a3;
  color: #777;
  background-color: #dfd;
}

.upload-progress {
  margin-bottom: 10px;
}

.upload-progress .desc {
  font-size: 0.85em;
  color: #555;
}