upload_to_hub_folders_progress_bar

Running

App Files Files Community

multimodalart HF staff commited on Jul 15, 2023

Commit

367dacb

•

1 Parent(s): ad155f6

Update index.html

Browse files

Files changed (1) hide show

index.html +171 -58

index.html CHANGED Viewed

@@ -16,6 +16,20 @@
       #error {
         color: red;
       }
     </style>
   </head>
   <body>
@@ -23,6 +37,8 @@
     <input type="password" id="tokenInput" name="tokenInput">
     <label for="repoInput">Repository ID:</label>
     <input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model">
     <input type="file" id="fileUpload" multiple>
     <button id="uploadButton">Upload Files</button>
     <div id="processingMessage"></div>
@@ -32,101 +48,198 @@
     <script type="module">
       import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.8.3/+esm";
       class FileUploader {
         constructor() {
           this.fileInput = document.getElementById('fileUpload');
           this.uploadButton = document.getElementById('uploadButton');
-          this.tokenInput = document.getElementById('tokenInput');
-          this.repoInput = document.getElementById('repoInput');
           this.progressBar = document.getElementById('progressBar');
           this.messageDiv = document.getElementById('message');
           this.errorDiv = document.getElementById('error');
           this.processingMessage = document.getElementById('processingMessage');
           this.hijackFetch();
-          this.uploadButton.addEventListener('click', this.upload);
         }
-        hijackFetch = () => {
           const originalFetch = fetch;
-          this.totalUploaded = 0;
-          this.progressMap = new Map();
-          fetch = (url, init) => init.method !== 'PUT' ? originalFetch(url, init) : this.handleFetch(url, init);
-        };
-        handleFetch = (url, init) => new Promise((resolve, reject) => {
-          const xhr = new XMLHttpRequest();
-          xhr.open(init.method, url);
-          for (let header in init.headers) xhr.setRequestHeader(header, init.headers[header]);
-          xhr.onload = () => resolve({ok: xhr.status >= 200 && xhr.status < 300, status: xhr.status, statusText: xhr.statusText, text: () => Promise.resolve(xhr.responseText), json: () => Promise.resolve(JSON.parse(xhr.responseText)), headers: {get: (header) => xhr.getResponseHeader(header)}});
           xhr.onerror = () => reject(new TypeError('Network request failed'));
           xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
           xhr.upload.onprogress = (event) => this.updateUploadProgress(event, url);
           xhr.send(init.body);
-        });
-        updateUploadProgress = (event, url) => {
           if (event.lengthComputable) {
             this.progressMap.set(url, event.loaded);
             this.totalUploaded = Array.from(this.progressMap.values()).reduce((a, b) => a + b, 0);
             this.progressBar.value = this.totalUploaded;
-            this.processingMessage.textContent = this.totalUploaded === 0 ? 'Preparing your upload' : this.totalUploaded === this.progressBar.max ? 'Processing your upload' : '';
           }
-        };
-        upload = async () => {
-          const files = Array.from(this.fileInput.files);
-          const HF_ACCESS_TOKEN = this.tokenInput.value;
-          const REPO_ID = this.repoInput.value;
           this.progressBar.value = 0;
           this.messageDiv.textContent = '';
           this.errorDiv.textContent = '';
           this.processingMessage.textContent = '';
-          if (files.length > 0) {
-            this.progressBar.max = files.reduce((total, file) => total + file.size, 0);
-            this.totalUploaded = 0;
-            this.startTime = Date.now();
             try {
               await this.createRepository(REPO_ID, HF_ACCESS_TOKEN);
-              await this.uploadFilesToRepo(REPO_ID, HF_ACCESS_TOKEN, files);
-              this.handleUploadSuccess(files);
             } catch (error) {
               this.handleErrorDuringUpload(error);
             }
           } else {
-            this.messageDiv.textContent = 'Please select files to upload';
           }
-        };
-        createRepository = async (REPO_ID, HF_ACCESS_TOKEN) => {
           try {
-            await createRepo({repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }});
           } catch (error) {
-            if (error.message !== 'You already created this model repo') throw error;
           }
-        };
-        uploadFilesToRepo = (REPO_ID, HF_ACCESS_TOKEN, files) => uploadFiles({repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }, files: files.map(file => ({path: file.name, content: file}))});
-        handleUploadSuccess = (files) => {
-          const elapsedTime = (Date.now() - this.startTime) / 1000;
-          let totalSizeMB = this.progressBar.max / (1024 * 1024)
-          let speed = totalSizeMB / elapsedTime;
-          this.messageDiv.innerHTML = `All files uploaded successfully in ${elapsedTime.toFixed(2)} seconds, for all ${totalSizeMB.toFixed(2)} MB in the ${files.length} files, speed ${speed.toFixed(2)} MB/s.`;
-          this.processingMessage.textContent = "All files processed";
-        };
-        handleErrorDuringUpload = (error) => {
           console.error('Error during upload', error);
           this.errorDiv.textContent = 'Error during upload: ' + error.message;
-        };
       }
       new FileUploader();
     </script>
   </body>
-</html>

       #error {
         color: red;
       }
+      #drop_zone {
+        width: 300px;
+        height: 200px;
+        border: 2px dashed #aaa;
+        line-height: 200px;
+        text-align: center;
+        margin-top: 10px;
+      }
+      #file_list {
+        margin-top: 10px;
+      }
+      #fileUpload {
+        display: none;
+      }
     </style>
   </head>
   <body>
     <input type="password" id="tokenInput" name="tokenInput">
     <label for="repoInput">Repository ID:</label>
     <input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model">
+    <div id="drop_zone">Drag files/folders here or click to browse from your computer.</div>
+    <ul id="file_list"></ul>
     <input type="file" id="fileUpload" multiple>
     <button id="uploadButton">Upload Files</button>
     <div id="processingMessage"></div>
     <script type="module">
       import { createRepo, uploadFiles } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.8.3/+esm";
       class FileUploader {
         constructor() {
+          this.files = [];
+          this.totalUploaded = 0;
+          this.startTime = 0;
+          this.progressMap = new Map();
           this.fileInput = document.getElementById('fileUpload');
+          this.dropZone = document.getElementById('drop_zone');
+          this.fileList = document.getElementById('file_list');
           this.uploadButton = document.getElementById('uploadButton');
           this.progressBar = document.getElementById('progressBar');
           this.messageDiv = document.getElementById('message');
           this.errorDiv = document.getElementById('error');
           this.processingMessage = document.getElementById('processingMessage');
+          this.tokenInput = document.getElementById('tokenInput');
+          this.repoInput = document.getElementById('repoInput');
           this.hijackFetch();
+          this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
+          this.dropZone.addEventListener('click', () => this.fileInput.click());
+          this.dropZone.addEventListener('dragover', event => event.preventDefault());
+          this.dropZone.addEventListener('drop', (e) => this.handleFileDrop(e));
+          this.uploadButton.addEventListener('click', () => this.upload());
         }
+        hijackFetch() {
           const originalFetch = fetch;
+          fetch = (url, init) => {
+            if (init.method !== 'PUT') {
+              return originalFetch(url, init);
+            }
+            return new Promise((resolve, reject) => {
+              const xhr = new XMLHttpRequest();
+              xhr.open(init.method, url);
+              for (let header in init.headers) {
+                xhr.setRequestHeader(header, init.headers[header]);
+              }
+              this.handleXHR(xhr, resolve, reject, url, init);
+            });
+          };
+        }
+        handleXHR(xhr, resolve, reject, url, init) {
+          xhr.onload = () => {
+            resolve({
+              ok: xhr.status >= 200 && xhr.status < 300,
+              status: xhr.status,
+              statusText: xhr.statusText,
+              text: () => Promise.resolve(xhr.responseText),
+              json: () => Promise.resolve(JSON.parse(xhr.responseText)),
+              headers: { get: (header) => xhr.getResponseHeader(header) }
+            });
+          };
           xhr.onerror = () => reject(new TypeError('Network request failed'));
           xhr.ontimeout = () => reject(new TypeError('Network request failed due to timeout'));
           xhr.upload.onprogress = (event) => this.updateUploadProgress(event, url);
           xhr.send(init.body);
+        }
+        updateUploadProgress(event, url) {
           if (event.lengthComputable) {
             this.progressMap.set(url, event.loaded);
             this.totalUploaded = Array.from(this.progressMap.values()).reduce((a, b) => a + b, 0);
+            const elapsedSeconds = (Date.now() - this.startTime) / 1000;
             this.progressBar.value = this.totalUploaded;
+            if (this.totalUploaded === 0) {
+              this.processingMessage.textContent = 'Preparing your upload';
+            } else if (this.totalUploaded === this.progressBar.max) {
+              this.processingMessage.textContent = 'Processing your upload';
+            }
           }
+        }
+        handleFileSelect(event) {
+          const newFiles = Array.from(event.target.files).map(file => ({ path: file.name, content: file }));
+          this.files = this.files.concat(newFiles);
+          this.updateFileList();
+        }
+        handleFileDrop(event) {
+          event.preventDefault();
+          let items = event.dataTransfer.items;
+          for (let i = 0; i < items.length; i++) {
+            let item = items[i].webkitGetAsEntry();
+            if (item) {
+              this.traverseFileTree(item);
+            }
+          }
+        }
+        traverseFileTree(item, path = '') {
+          if (item.isFile) {
+            item.file((file) => {
+              this.files.push({ path: path + file.name, content: file });
+              this.updateFileList();
+            });
+          } else if (item.isDirectory) {
+            let dirReader = item.createReader();
+            dirReader.readEntries((entries) => {
+              for (let i = 0; i < entries.length; i++) {
+                this.traverseFileTree(entries[i], path + item.name + "/");
+              }
+            });
+          }
+        }
+        updateFileList() {
+          this.fileList.innerHTML = '';
+          for (let file of this.files) {
+            let listItem = document.createElement('li');
+            listItem.textContent = file.path;
+            this.fileList.appendChild(listItem);
+          }
+        }
+        async upload() {
           this.progressBar.value = 0;
           this.messageDiv.textContent = '';
           this.errorDiv.textContent = '';
           this.processingMessage.textContent = '';
+          const HF_ACCESS_TOKEN = this.tokenInput.value;
+          const REPO_ID = this.repoInput.value;
+          if (this.files.length > 0) {
+            this.prepareUpload();
             try {
               await this.createRepository(REPO_ID, HF_ACCESS_TOKEN);
+              await this.uploadFilesToRepo(REPO_ID, HF_ACCESS_TOKEN);
+              this.handleUploadSuccess();
             } catch (error) {
               this.handleErrorDuringUpload(error);
             }
           } else {
+            this.messageDiv.textContent = 'No files selected for upload.';
           }
+        }
+        prepareUpload() {
+          let totalSize = this.files.reduce((total, file) => total + file.content.size, 0);
+          this.progressBar.max = totalSize;
+          this.totalUploaded = 0;
+          this.startTime = Date.now();
+        }
+        async createRepository(REPO_ID, HF_ACCESS_TOKEN) {
           try {
+            await createRepo({
+              repo: REPO_ID,
+              credentials: { accessToken: HF_ACCESS_TOKEN },
+            });
           } catch (error) {
+            if (error.message !== 'You already created this model repo') {
+              throw error;
+            }
           }
+        }
+        async uploadFilesToRepo(REPO_ID, HF_ACCESS_TOKEN) {
+          await uploadFiles({
+            repo: REPO_ID,
+            credentials: { accessToken: HF_ACCESS_TOKEN },
+            files: this.files
+          });
+        }
+        handleUploadSuccess() {
+          this.messageDiv.textContent = 'Upload successful!';
+          this.processingMessage.textContent = '';
+          this.files = [];
+          this.updateFileList();
+        }
+        handleErrorDuringUpload(error) {
           console.error('Error during upload', error);
           this.errorDiv.textContent = 'Error during upload: ' + error.message;
+        }
       }
       new FileUploader();
     </script>
   </body>
+</html>