Skip to content
Browse files

new demo: dnd + filereader + xhr2

  • Loading branch information...
1 parent 73693f5 commit 5fc6ff12c7e8b6baee3163c354fbfd4bdeaffd65 @remy committed
Showing with 126 additions and 1 deletion.
  1. +10 −0 demos.json
  2. +110 −0 demos/dnd-upload.html
  3. +3 −1 demos/file-api.html
  4. +3 −0 devnull.php
View
10 demos.json
@@ -1,5 +1,15 @@
[
{
+ "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",
"tags": "classlist",
View
110 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>
View
4 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(' + event.target.result + ') no-repeat center';
};
+ console.log(file);
reader.readAsDataURL(file);
return false;
};
-</script>
+</script>
View
3 devnull.php
@@ -0,0 +1,3 @@
+<?php
+var_dump($_FILES)
+?>

0 comments on commit 5fc6ff1

Please sign in to comment.
Something went wrong with that request. Please try again.