Merge pull request #519 from shiffman/fileinput_try2

Implemented functionality for a div you can drag files onto
processing · Feb 9, 2015 · 96425a1 · 96425a1
2 parents 8ee3e02 + 445067d
commit 96425a1
Show file tree

Hide file tree

Showing 3 changed files with 172 additions and 0 deletions.
diff --git a/examples/addons/p5.dom/file_input_div/index.html b/examples/addons/p5.dom/file_input_div/index.html
@@ -0,0 +1,25 @@
+<head>
+ <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
+ <script language="javascript" type="text/javascript" src="../../../../lib/addons/p5.dom.js"></script>
+ <script language="javascript" type="text/javascript" src="sketch.js"></script> 
+ <style>
+ #drop_zone {
+ border: 2px dashed #000;
+ border-radius: 5px;
+ padding: 12px;
+ width: 50%;
+ text-align: center;
+ font: 20pt bold;
+ }
+ .thumb {
+ height: 75px;
+ border: 1px solid #000;
+ margin: 10px 5px 0 0;
+ }
+ </style>
+
+</head>
+
+<body>
+ <div id="test"></div>
+</body>
diff --git a/examples/addons/p5.dom/file_input_div/sketch.js b/examples/addons/p5.dom/file_input_div/sketch.js
@@ -0,0 +1,43 @@
+// based on http://www.html5rocks.com/en/tutorials/file/dndfiles/
+
+function setup() {
+
+ noCanvas();
+ // // Check for the various File API support.
+ // if (window.File && window.FileReader && window.FileList && window.Blob) {
+ // console.log('Great success! All the File APIs are supported');
+ // } else {
+ // alert('The File APIs are not fully supported in this browser.');
+ // }
+
+ // // <div id="drop_zone">Drop files here</div>
+ // // Make a div to drag a file on
+ var dropZone = createDiv('Drop files here');
+ dropZone.id('drop_zone');
+
+ dropZone.dragOver(function() {
+ this.style('background','#AAAAAA');
+ });
+
+ dropZone.dragLeave(function() {
+ // do nothing?
+ console.log("LEAVING");
+ });
+
+ dropZone.drop(dropped, gotFile);
+
+}
+
+function dropped() {
+ this.style('background','');
+}
+
+function gotFile(file) {
+ var fileDiv = createDiv(file.name + ' ' + file.type + ' ' + file.subtype + ' ' + file.size + ' bytes');
+ if (file.type === 'image') {
+ var img = createImg(file.data);
+ img.class('thumb');
+ } else if (file.type === 'text') {
+ createDiv(file.data);
+ }
+}
diff --git a/src/objects/p5.Element.js b/src/objects/p5.Element.js
@@ -372,6 +372,110 @@ define(function(require) {
  };
 
 
+
+ /**
+ * The .dragOver() function is called once after every time a
+ * file is dragged over the element. This can be used to attach an
+ * element specific event listener.
+ *
+ * @method dragOver
+ * @param {Function} fxn function to be fired when mouse is
+ * dragged over the element.
+ * @return {p5.Element}
+ */
+ p5.Element.prototype.dragOver = function (fxn) {
+ attachListener('dragover', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .dragLeave() function is called once after every time a
+ * dragged file leaves the element area. This can be used to attach an
+ * element specific event listener.
+ *
+ * @method dragLeave
+ * @param {Function} fxn function to be fired when mouse is
+ * dragged over the element.
+ * @return {p5.Element}
+ */
+ p5.Element.prototype.dragLeave = function (fxn) {
+ attachListener('dragleave', fxn, this);
+ return this;
+ };
+
+ /**
+ * The .drop() function is called for each file dropped on the element.
+ * It requires a callback that is passed a p5.File object
+ *
+ * @method drop
+ * @param {Function} callback to receive loaded file.
+ * @return {p5.Element}
+ */
+ p5.Element.prototype.drop = function (fxn, callback) {
+
+ // If you want to be able to drop you've got to turn off
+ // a lot of default behavior
+ attachListener('dragover',function(evt) {
+ evt.stopPropagation();
+ evt.preventDefault();
+ },this);
+
+ // If this is a drag area we need to turn off the default behavior
+ attachListener('dragleave',function(evt) {
+ evt.stopPropagation();
+ evt.preventDefault();
+ },this);
+
+ // Make a file loader callback and trigger user's callback
+ function makeLoader(theFile) {
+ // Making a p5.File object
+ var p5file = new p5.File(theFile);
+ return function(e) {
+ p5file.data = e.target.result;
+ callback(p5file);
+ };
+ }
+
+ // If just one argument it's the callback for the files
+ if (arguments.length < 2) {
+ callback = fxn;
+ // If two we have a separate callback for the drop moment
+ } else {
+ attachListener('drop', fxn, this);
+ }
+
+ // Deal with the files
+ attachListener('drop', function(evt) {
+
+ evt.stopPropagation();
+ evt.preventDefault();
+
+ // A FileList
+ var files = evt.dataTransfer.files;
+
+ // Load each one and trigger the callback
+ for (var i = 0; i < files.length; i++) {
+ var f = files[i];
+ var reader = new FileReader();
+ reader.onload = makeLoader(f);
+
+
+ // Text of data?
+ // This should likely be improved
+ if (f.type === 'text') {
+ reader.readAsText(f);
+ } else {
+ reader.readAsDataURL(f);
+ }
+ }
+ }, this);
+
+ return this;
+ };
+
+
+
+
  function attachListener(ev, fxn, ctx) {
  // LM removing, not sure why we had this?
  // var _this = ctx;