Example showing both ways to use FormData

Author: Pablo Brasero Moreno

example_html5_upload.rb

@@ -5,8 +5,17 @@
   send_file File.join(settings.public_folder, 'index.html')
 end
 
+post '/' do
+  our_file = params.delete('our-file')
+  "Received form fields:\n\n" + pretty_str(params) +
+    "\nAnd uploaded file:\n\n" + file_info(our_file)
+end
+
 post '/upload' do
-  file = params['our-file']
+  file_info params['our-file']
+end
+
+def file_info(file)
   details = {
     :filename => file[:filename],
     :type => file[:type],
@@ -15,5 +24,9 @@
     :tempfile_path => file[:tempfile].path,
     :tempfile_size => file[:tempfile].size,
   }
-  ''.tap{|output| PP.pp(details, output) }
+  pretty_str details
 end
+
+def pretty_str(obj)
+  ''.tap{|output| PP.pp(obj, output) }
+end

public/index.html

@@ -10,54 +10,68 @@
   <p><label>Some other field: <input name="other-field" type="text" id="other-field-id" /></label></p>
   <p><input type="submit" value="Save" /></p>
   <script>
+var form = document.getElementById('form-id');
+form.onsubmit = function() {
+  var formData = new FormData(form);
+  var action = form.getAttribute('action');
+
+  sendXHRequest(formData, action);
+
+  return false;
+}
+
 var uploadBtn = document.getElementById('upload-button-id');
 uploadBtn.onclick = function (evt) {
-  var fileInput = document.getElementById('file-id');
-  var file = fileInput.files[0];
   var formData = new FormData();
   var action = '/upload';
+  var fileInput = document.getElementById('file-id');
+  var file = fileInput.files[0];
   formData.append('our-file', file);
 
+  sendXHRequest(formData, action);
+
+  return false;
+}
+
+function sendXHRequest(formData, uri) {
   var xhr = new XMLHttpRequest();
   xhr.upload.addEventListener('loadstart', onloadstartHandler, false);
   xhr.upload.addEventListener('progress', onprogressHandler, false);
   xhr.upload.addEventListener('load', onloadHandler, false);
   xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
-  xhr.open('POST', action, true);
-  xhr.send(formData); // Simple!
-
-  return false;
+  xhr.open('POST', uri, true);
+  xhr.send(formData);
+}
 
-  function onloadstartHandler(evt) {
-    var div = document.getElementById('upload-status');
-    div.innerHTML = 'Upload started!';
-  }
+function onloadstartHandler(evt) {
+  var div = document.getElementById('upload-status');
+  div.innerHTML = 'Upload started!';
+}
 
-  function onloadHandler(evt) {
-    var div = document.getElementById('upload-status');
-    div.innerHTML = 'Upload successful!';
-  }
+function onloadHandler(evt) {
+  var div = document.getElementById('upload-status');
+  div.innerHTML = 'Upload successful!';
+}
 
-  function onprogressHandler(evt) {
-    var div = document.getElementById('progress');
-    var percent = evt.loaded/evt.total*100;
-    div.innerHTML = 'Progress: ' + percent + '%';
-  }
+function onprogressHandler(evt) {
+  var div = document.getElementById('progress');
+  var percent = evt.loaded/evt.total*100;
+  div.innerHTML = 'Progress: ' + percent + '%';
+}
 
-  function onreadystatechangeHandler(evt) {
-      var status = null;
+function onreadystatechangeHandler(evt) {
+  var status = null;
 
-      try {
-          status = evt.target.status;
-      }
-      catch(e) {
-          return;
-      }
+  try {
+    status = evt.target.status;
+  }
+  catch(e) {
+    return;
+  }
 
-      if (status == '200' && evt.target.responseText) {
-        var result = document.getElementById('result');
-        result.innerHTML = '<p>The server saw it as:</p><pre>' + evt.target.responseText + '</pre>';
-      }
+  if (status == '200' && evt.target.responseText) {
+    var result = document.getElementById('result');
+    result.innerHTML = '<p>The server saw it as:</p><pre>' + evt.target.responseText + '</pre>';
   }
 }
   </script>