Merge pull request #96 from ux3d/fix/directory_drag_n_drop

use dropzone to accept gltf drops with subdirectories
KhronosGroup · Jan 25, 2021 · 3cb5bfe · 3cb5bfe
2 parents 338c221 + 8daedba
commit 3cb5bfe
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/app_web/package.json b/app_web/package.json
@@ -30,6 +30,7 @@
     "gltf-sample-viewer": "../source",
     "rollup-plugin-commonjs": "^10.1.0",
     "rxjs": "^6.6.3",
+    "simple-dropzone": "^0.8.0",
     "vue": "^2.6.11",
     "vue-rx": "^6.2.0"
   },

diff --git a/app_web/src/logic/uimodel.js b/app_web/src/logic/uimodel.js
@@ -1,8 +1,10 @@
-import { fromEvent, merge } from 'rxjs';
+import { Observable, merge } from 'rxjs';
 import { map, filter, startWith, pluck } from 'rxjs/operators';
 import { glTF, ToneMaps, DebugOutput } from 'gltf-sample-viewer';
 
-import { getIsGltf, getIsGlb, getIsHdr } from 'gltf-sample-viewer';
+import { getIsGltf, getIsGlb } from 'gltf-sample-viewer';
+
+import { SimpleDropzone } from 'simple-dropzone';
 
 // this class wraps all the observables for the gltf sample viewer state
 // the data streams coming out of this should match the data required in GltfState
@@ -112,19 +114,23 @@ class UIModel
     static getInputObservables(inputDomElement)
     {
         const observables = {};
-        fromEvent(inputDomElement, "dragover").subscribe( event => event.preventDefault() ); // just prevent the default behaviour
-        const dropEvent = fromEvent(inputDomElement, "drop").pipe( map( event => {
-            // prevent the default drop event
-            event.preventDefault();
-            return event;
-        }));
-        observables.filesDropped = dropEvent.pipe(map( (event) => {
-            // Use DataTransfer files interface to access the file(s)
-            return Array.from(event.dataTransfer.files);
-        }));
+
+        const simpleDropzoneObservabel = new Observable(subscriber => {
+            const dropCtrl = new SimpleDropzone(inputDomElement, inputDomElement);
+            dropCtrl.on('drop', ({files}) => {
+                subscriber.next(files);
+            });
+            dropCtrl.on('droperror', () => {
+                subscriber.error();
+            });
+        });
+        observables.filesDropped = simpleDropzoneObservabel.pipe(
+            map(files => Array.from(files.values()))
+        );
+
         observables.gltfDropped = observables.filesDropped.pipe(
             // filter out any non .gltf or .glb files
-            filter( (files) => files.filter( file => getIsGlb(file.name) || getIsGltf(file.name)).length > 0),
+
             map( (files) => {
                 // restructure the data by separating mainFile (gltf/glb) from additionalFiles
                 const mainFile = files.find( (file) => getIsGlb(file.name) || getIsGltf(file.name));
@@ -139,7 +145,7 @@ class UIModel
                 return files.find( (file) => file.name.endsWith(".hdr"));
             }),
             filter(file => file !== undefined),
-        )
+        );
         return observables;
     }
 

diff --git a/source/gltf/image.js b/source/gltf/image.js
@@ -169,7 +169,8 @@ class gltfImage extends GltfObject
 
         let foundFile = files.find(function(file)
         {
-            if (file.name === this.uri || file.fullPath === this.uri)
+            const uriName = this.uri.split('\\').pop().split('/').pop();
+            if (file.name === uriName)
             {
                 return true;
             }