Support for drag&dropping an entire folder with model files #175

source/io/fileutils.js

@@ -52,7 +52,7 @@ OV.RequestUrl = function (url, format)
 			reject ();
 			return;
 		}
-	
+
 		request.onload = function () {
 			if (request.status === 200) {
 				resolve (request.response);
@@ -60,11 +60,11 @@ OV.RequestUrl = function (url, format)
 				reject ();
 			}
 		};
-		
+
 		request.onerror = function () {
 			reject ();
 		};
-	
+
 		request.send (null);
 	});
 };
@@ -79,7 +79,7 @@ OV.ReadFile = function (file, format)
 				resolve (event.target.result);
 			}
 		};
-		
+
 		reader.onerror = function () {
 			reject ();
 		};
@@ -93,4 +93,3 @@ OV.ReadFile = function (file, format)
 		}
 	});
 };
-

website/o3dv/js/utils.js

@@ -189,3 +189,76 @@ OV.InstallVerticalSplitter = function (splitterDiv, resizedDiv, flipped, onResiz
         }
     });
 };
+
+OV.GetFilesFromDataTransfer = function (dataTransfer, onReady)
+{
+    async function GetFileEntriesFromDirectory (dirEntry, fileEntries)
+    {
+        let reader = dirEntry.createReader ();
+        return new Promise ((resolve, reject) => {
+            reader.readEntries (
+                async (dirEntries) => {
+                    for (let entry of dirEntries) {
+                        if (entry.isFile) {
+                            fileEntries.push (entry);
+                        } else if (entry.isDirectory) {
+                            await GetFileEntriesFromDirectory (entry, fileEntries);
+                        }
+                    }
+                    resolve ();
+                },
+                (error) => {
+                    reject (error);
+                }
+            );
+        });
+    }
+
+    async function GetFileObjectsFromEntries (entries, onReady)
+    {
+        let fileEntries = [];
+        for (let entry of entries) {
+            if (entry.isFile) {
+                fileEntries.push (entry);
+            } else if (entry.isDirectory) {
+                await GetFileEntriesFromDirectory (entry, fileEntries);
+            }
+        }
+
+        let fileObjects = await Promise.all (fileEntries.map ((fileEntry) => {
+            return new Promise ((resolve, reject) => {
+                fileEntry.file (
+                    (file) => {
+                        resolve (file);
+                    },
+                    (error) => {
+                        reject (error);
+                    }
+                );
+            })
+        }));
+
+        onReady (fileObjects);
+    }
+
+    let getAsEntryFunc = null;
+    if (DataTransferItem) {
+        if (DataTransferItem.prototype.getAsEntry) {
+            getAsEntryFunc = DataTransferItem.prototype.getAsEntry;
+        } else if (DataTransferItem.prototype.webkitGetAsEntry) {
+            getAsEntryFunc = DataTransferItem.prototype.webkitGetAsEntry;
+        }
+    }
+
+    if (getAsEntryFunc !== null) {
+        let entries = [];
+        for (let item of dataTransfer.items) {
+            entries.push (getAsEntryFunc.call (item));
+        }
+        GetFileObjectsFromEntries (entries, (allEntries) => {
+            onReady (allEntries);
+        });
+    } else {
+        onReady (dataTransfer.files);
+    }
+};

website/o3dv/js/website.js

@@ -489,10 +489,12 @@ OV.Website = class
         window.addEventListener ('drop', (ev) => {
             ev.stopPropagation ();
             ev.preventDefault ();
-            if (ev.dataTransfer.files.length > 0) {
-                this.eventHandler.HandleEvent ('model_load_started', { source : 'drop' });
-                this.LoadModelFromFileList (ev.dataTransfer.files);
-            }
+            OV.GetFilesFromDataTransfer (ev.dataTransfer, (files) => {
+                if (files.length > 0) {
+                    this.eventHandler.HandleEvent ('model_load_started', { source : 'drop' });
+                    this.LoadModelFromFileList (files);
+                }
+            });
         }, false);
     }