Update index.html

index.html

@@ -35,13 +35,19 @@
 
       class FileUploader {
         constructor() {
+          this.files = [];
+          this.fileInput = document.getElementById('fileUpload');
           this.uploadButton = document.getElementById('uploadButton');
           this.uploadButton.addEventListener('click', () => this.upload());
+          this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
+        }
+
+        handleFileSelect(event) {
+          const newFiles = Array.from(event.target.files).map(file => ({ path: file.name, content: file }));
+          this.files = this.files.concat(newFiles);
         }
 
         async upload() {
-          const fileInput = document.getElementById('fileUpload');
-          const files = Array.from(fileInput.files);
           const tokenInput = document.getElementById('tokenInput');
           const HF_ACCESS_TOKEN = tokenInput.value;
           const repoInput = document.getElementById('repoInput');
@@ -56,8 +62,8 @@
           errorDiv.textContent = '';
           processingMessage.textContent = '';
 
-          if (files.length > 0) {
-            const totalSize = files.reduce((total, file) => total + file.size, 0) / (1024 * 1024);
+          if (this.files.length > 0) {
+            const totalSize = this.files.reduce((total, file) => total + file.content.size, 0) / (1024 * 1024);
             const startTime = Date.now();
 
             try {
@@ -72,7 +78,7 @@
             }
 
             try {
-              await uploadFiles({ repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }, files: files.map(file => ({ path: file.name, content: file })) });
+              await uploadFiles({ repo: REPO_ID, credentials: { accessToken: HF_ACCESS_TOKEN }, files: this.files });
               console.log('All files uploaded successfully');
               progressBar.value = 100;
             } catch (error) {
@@ -84,8 +90,9 @@
             const elapsedTime = (Date.now() - startTime) / 1000;
             const speed = totalSize / elapsedTime;
 
-            messageDiv.textContent = `All files uploaded successfully in ${elapsedTime.toFixed(2)} seconds, for all ${totalSize.toFixed(2)} MB in the ${files.length} files, speed ${speed.toFixed(2)} MB/s.`;
+            messageDiv.textContent = `All files uploaded successfully in ${elapsedTime.toFixed(2)} seconds, for all ${totalSize.toFixed(2)} MB in the ${this.files.length} files, speed ${speed.toFixed(2)} MB/s.`;
             processingMessage.textContent = "All files processed";
+            this.files = []; // Clear files after upload
           } else {
             messageDiv.textContent = 'Please select files to upload';
           }