Merge pull request #3263 from Spongman/video-input-file

create objectUrls for video/audio input files
processing · Nov 5, 2018 · 9b5094a · 9b5094a
2 parents 2939d68 + bc924f6
commit 9b5094a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 39 deletions.
diff --git a/lib/addons/p5.dom.js b/lib/addons/p5.dom.js
@@ -929,30 +929,12 @@
     // We're simplifying life and assuming that we always
     // want to load every selected file
     function handleFileSelect(evt) {
-      function makeLoader(theFile) {
-        // Making a p5.File object
-        var p5file = new p5.File(theFile);
-        return function(e) {
-          p5file.data = e.target.result;
-          callback(p5file);
-        };
-      }
       // These are the files
       var files = evt.target.files;
       // Load each one and trigger a callback
       for (var i = 0; i < files.length; i++) {
         var f = files[i];
-        var reader = new FileReader();
-
-        reader.onload = makeLoader(f);
-
-        // Text or data?
-        // This should likely be improved
-        if (f.type.indexOf('text') > -1) {
-          reader.readAsText(f);
-        } else {
-          reader.readAsDataURL(f);
-        }
+        p5.File._load(f, callback);
       }
     }
     // Is the file stuff supported?
@@ -3134,3 +3116,27 @@
     this.data = undefined;
   };
 });
+
+p5.File._createLoader = function(theFile, callback) {
+  var reader = new FileReader();
+  reader.onload = function(e) {
+    var p5file = new p5.File(theFile);
+    p5file.data = e.target.result;
+    callback(p5file);
+  };
+  return reader;
+};
+
+p5.File._load = function(f, callback) {
+  // Text or data?
+  // This should likely be improved
+  if (/^text\//.test(f.type)) {
+    p5.File._createLoader(f, callback).readAsText(f);
+  } else if (!/^(video|audio)\//.test(f.type)) {
+    p5.File._createLoader(f, callback).readAsDataURL(f);
+  } else {
+    var file = new p5.File(f);
+    file.data = URL.createObjectURL(f);
+    callback(file);
+  }
+};
diff --git a/src/core/p5.Element.js b/src/core/p5.Element.js
@@ -989,16 +989,6 @@ p5.Element.prototype.dragLeave = function(fxn) {
  * Canvas turns into whatever image is dragged/dropped onto it.
  */
 p5.Element.prototype.drop = function(callback, fxn) {
-  // 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);
-    };
-  }
-
   // Is the file stuff supported?
   if (window.File && window.FileReader && window.FileList && window.Blob) {
     // If you want to be able to drop you've got to turn off
@@ -1040,16 +1030,7 @@ p5.Element.prototype.drop = function(callback, fxn) {
         // 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 or data?
-          // This should likely be improved
-          if (f.type.indexOf('text') > -1) {
-            reader.readAsText(f);
-          } else {
-            reader.readAsDataURL(f);
-          }
+          p5.File._load(f, callback);
         }
       },
       this