new demo: dnd + filereader + xhr2

Author: remy

demos.json

@@ -1,4 +1,14 @@
 [
+  {
+    "desc": "Drag and drop and XHR upload",
+    "url": "dnd-upload",
+    "tags": "file dnd xhr2",
+    "support": {
+      "live": "chrome firefox",
+      "nightly": "ie"
+    },
+    "test": "typeof FileReader != 'undefined' && 'draggable' in document.createElement('span') && !!window.FormData && 'upload' in new XMLHttpRequest"
+  },
   {
     "desc": "Simple class manipulation",
     "url": "classlist",

demos/dnd-upload.html

@@ -0,0 +1,110 @@
+<title>Drag and drop, automatic upload</title>
+<style>
+#holder { border: 10px dashed #ccc; width: 300px; min-height: 300px; margin: 20px auto;}
+#holder.hover { border: 10px dashed #0c0; }
+#holder img { display: block; margin: 10px auto; }
+#holder p { margin: 10px; font-size: 14px; }
+meter { width: 100%; }
+meter:after { content: '%'; }
+</style>
+<article>
+  <div id="holder">
+  </div> 
+  <p id="upload" hidden><label>Drag &amp; drop not supported, but you can still upload via this input field:<br><input type="file"></label></p>
+  <p id="filereader">File API &amp; FileReader API not supported</p>
+  <p id="formdata">XHR2's FormData is not supported</p>
+  <p id="progress">XHR2's upload progress isn't supported</p>
+  <p>Upload progress: <meter id="uploadprogress" min="0" max="100" value="0">0</meter></p>
+  <p>Drag an image from your desktop on to the drop zone above to see the browser both render the preview, but also upload automatically to this server.</p>
+</article>
+<script>
+var holder = document.getElementById('holder'),
+    tests = {
+      filereader: typeof FileReader != 'undefined',
+      dnd: 'draggable' in document.createElement('span'),
+      formdata: !!window.FormData,
+      progress: "upload" in new XMLHttpRequest
+    }, 
+    support = {
+      filereader: document.getElementById('filereader'),
+      formdata: document.getElementById('formdata'),
+      progress: document.getElementById('progress')
+    },
+    acceptedTypes = {
+      'image/png': true,
+      'image/jpeg': true,
+      'image/gif': true
+    },
+    progress = document.getElementById('uploadprogress'),
+    fileupload = document.getElementById('upload');
+
+"filereader formdata progress".split(' ').forEach(function (api) {
+  if (tests[api] === false) {
+    support[api].className = 'fail';
+  } else {
+    support[api].hidden = true;
+  }
+});
+
+function previewfile(file) {
+  if (tests.filereader === true && acceptedTypes[file.type] === true) {
+    var reader = new FileReader();
+    reader.onload = function (event) {
+      var image = new Image();
+      image.src = event.target.result;
+      image.width = 250; // a fake resize
+      holder.appendChild(image);
+    };
+
+    reader.readAsDataURL(file);
+  }  else {
+    holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.fileSize ? (file.fileSize/1024|0) + 'K' : '');
+    console.log(file);
+  }
+}
+
+function readfiles(files) {
+    debugger;
+    var formData = tests.formdata ? new FormData() : null;
+    for (var i = 0; i < files.length; i++) {
+      if (tests.formdata) formData.append('file', files[i]);
+      previewfile(files[i]);
+    }
+
+    // now post a new XHR request
+    if (tests.formdata) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('POST', '/devnull.php');
+      xhr.onload = function() {
+        progress.value = progress.innerHTML = 100;
+      };
+
+      if (tests.progress) {
+        xhr.upload.onprogress = function (event) {
+          if (event.lengthComputable) {
+            var complete = (event.loaded / event.total * 100 | 0);
+            progress.value = progress.innerHTML = complete;
+          }
+        }
+      }
+
+      xhr.send(formData);
+    }
+}
+
+if (tests.dnd) { 
+  holder.ondragover = function () { this.className = 'hover'; return false; };
+  holder.ondragend = function () { this.className = ''; return false; };
+  holder.ondrop = function (e) {
+    this.className = '';
+    e.preventDefault();
+    readfiles(e.dataTransfer.files);
+  }
+} else {
+  fileupload.hidden = false;
+  fileupload.querySelector('input').onchange = function () {
+    readfiles(this.files);
+  };
+}
+
+</script>

demos/file-api.html

@@ -28,10 +28,12 @@
   var file = e.dataTransfer.files[0],
       reader = new FileReader();
   reader.onload = function (event) {
+    console.log(event.target);
     holder.style.background = 'url(http://github.com/'%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s1%3Eevent%3C/span%3E%3Cspan%20class=pl-kos%3E.%3C/span%3E%3Cspan%20class=pl-c1%3Etarget%3C/span%3E%3Cspan%20class=pl-kos%3E.%3C/span%3E%3Cspan%20class=pl-c1%3Eresult%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s%3E') no-repeat center';
   };
+  console.log(file);
   reader.readAsDataURL(file);
 
   return false;
 };
-</script>
+</script>

devnull.php

@@ -0,0 +1,3 @@
+<?php
+var_dump($_FILES)
+?>