Update index.html

index.html

@@ -1,4 +1,4 @@
-<input type="file" id="fileInput" multiple>
+<input type="file" id="fileInput" webkitdirectory multiple>
 <input type="text" id="repoInput" placeholder="Enter repo">
 <input type="password" id="accessTokenInput" placeholder="Enter access token">
 <button id="uploadButton">Upload</button>
@@ -6,27 +6,41 @@
 <script type="module">
     import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm";
 
+    function traverseFileTree(item, path) {
+        path = path || "";
+        return new Promise(resolve => {
+            if (item.isFile) {
+                // Get file
+                item.file(file => {
+                    file.webkitRelativePath = path + file.name;
+                    resolve(file);
+                });
+            } else if (item.isDirectory) {
+                // Get folder contents
+                item.createReader().readEntries(entries => {
+                    Promise.all(entries.map(entry => traverseFileTree(entry, path + item.name + "/")))
+                        .then(files => resolve([].concat(...files)));
+                });
+            }
+        });
+    }
+
     async function upload() {
         try {
             const fileInput = document.getElementById('fileInput');
             const repoInput = document.getElementById('repoInput');
             const accessTokenInput = document.getElementById('accessTokenInput');
-            
-            const files = Array.from(fileInput.files); // Convert FileList to an Array
+
             const repo = repoInput.value;
             const accessToken = accessTokenInput.value;
 
+            const entries = Array.from(fileInput.files).map(file => file.webkitGetAsEntry());
+            const files = [].concat(...await Promise.all(entries.map(entry => traverseFileTree(entry))));
             console.log(`Uploading ${files.length} file(s) to ${repo} with access token ${accessToken.substr(0, 4)}...`);
 
-            // Prompt the user for a unique upload folder for each file
-            const filesToUpload = await Promise.all(files.map(async (file) => {
-                const folderName = prompt(`Enter the upload folder for ${file.name}`);
-                // Append the original filename and extension to the folder name
-                const path = `${folderName}/${file.name}`;
-                return {
-                    path,
-                    content: file,
-                };
+            const filesToUpload = files.map(file => ({
+                path: file.webkitRelativePath,
+                content: file,
             }));
 
             const result = await uploadFiles({