Commit
·
8007eab
1
Parent(s):
5e772a5
Update index.html
Browse files- index.html +62 -2
index.html
CHANGED
|
@@ -16,6 +16,20 @@
|
|
| 16 |
#error {
|
| 17 |
color: red;
|
| 18 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</style>
|
| 20 |
</head>
|
| 21 |
<body>
|
|
@@ -23,6 +37,8 @@
|
|
| 23 |
<input type="password" id="tokenInput" name="tokenInput">
|
| 24 |
<label for="repoInput">Repository ID:</label>
|
| 25 |
<input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model">
|
|
|
|
|
|
|
| 26 |
<input type="file" id="fileUpload" multiple>
|
| 27 |
<button id="uploadButton">Upload Files</button>
|
| 28 |
<div id="processingMessage"></div>
|
|
@@ -37,14 +53,57 @@
|
|
| 37 |
constructor() {
|
| 38 |
this.files = [];
|
| 39 |
this.fileInput = document.getElementById('fileUpload');
|
|
|
|
|
|
|
| 40 |
this.uploadButton = document.getElementById('uploadButton');
|
| 41 |
-
|
| 42 |
this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
|
|
|
|
|
|
|
|
|
|
|
|
|
| 43 |
}
|
| 44 |
|
| 45 |
handleFileSelect(event) {
|
| 46 |
const newFiles = Array.from(event.target.files).map(file => ({ path: file.name, content: file }));
|
| 47 |
this.files = this.files.concat(newFiles);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 48 |
}
|
| 49 |
|
| 50 |
async upload() {
|
|
@@ -92,7 +151,8 @@
|
|
| 92 |
|
| 93 |
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.`;
|
| 94 |
processingMessage.textContent = "All files processed";
|
| 95 |
-
this.files = [];
|
|
|
|
| 96 |
} else {
|
| 97 |
messageDiv.textContent = 'Please select files to upload';
|
| 98 |
}
|
|
|
|
| 16 |
#error {
|
| 17 |
color: red;
|
| 18 |
}
|
| 19 |
+
#drop_zone {
|
| 20 |
+
width: 300px;
|
| 21 |
+
height: 200px;
|
| 22 |
+
border: 2px dashed #aaa;
|
| 23 |
+
line-height: 200px;
|
| 24 |
+
text-align: center;
|
| 25 |
+
margin-top: 10px;
|
| 26 |
+
}
|
| 27 |
+
#file_list {
|
| 28 |
+
margin-top: 10px;
|
| 29 |
+
}
|
| 30 |
+
#fileUpload {
|
| 31 |
+
display: none;
|
| 32 |
+
}
|
| 33 |
</style>
|
| 34 |
</head>
|
| 35 |
<body>
|
|
|
|
| 37 |
<input type="password" id="tokenInput" name="tokenInput">
|
| 38 |
<label for="repoInput">Repository ID:</label>
|
| 39 |
<input type="text" id="repoInput" name="repoInput" placeholder="my-user/nlp-model">
|
| 40 |
+
<div id="drop_zone">Drag files/folders here or click to browse from your computer.</div>
|
| 41 |
+
<ul id="file_list"></ul>
|
| 42 |
<input type="file" id="fileUpload" multiple>
|
| 43 |
<button id="uploadButton">Upload Files</button>
|
| 44 |
<div id="processingMessage"></div>
|
|
|
|
| 53 |
constructor() {
|
| 54 |
this.files = [];
|
| 55 |
this.fileInput = document.getElementById('fileUpload');
|
| 56 |
+
this.dropZone = document.getElementById('drop_zone');
|
| 57 |
+
this.fileList = document.getElementById('file_list');
|
| 58 |
this.uploadButton = document.getElementById('uploadButton');
|
| 59 |
+
|
| 60 |
this.fileInput.addEventListener('change', (e) => this.handleFileSelect(e));
|
| 61 |
+
this.dropZone.addEventListener('click', () => this.fileInput.click());
|
| 62 |
+
this.dropZone.addEventListener('dragover', event => event.preventDefault());
|
| 63 |
+
this.dropZone.addEventListener('drop', (e) => this.handleFileDrop(e));
|
| 64 |
+
this.uploadButton.addEventListener('click', () => this.upload());
|
| 65 |
}
|
| 66 |
|
| 67 |
handleFileSelect(event) {
|
| 68 |
const newFiles = Array.from(event.target.files).map(file => ({ path: file.name, content: file }));
|
| 69 |
this.files = this.files.concat(newFiles);
|
| 70 |
+
this.updateFileList();
|
| 71 |
+
}
|
| 72 |
+
|
| 73 |
+
handleFileDrop(event) {
|
| 74 |
+
event.preventDefault();
|
| 75 |
+
let items = event.dataTransfer.items;
|
| 76 |
+
for (let i = 0; i < items.length; i++) {
|
| 77 |
+
let item = items[i].webkitGetAsEntry();
|
| 78 |
+
if (item) {
|
| 79 |
+
this.traverseFileTree(item);
|
| 80 |
+
}
|
| 81 |
+
}
|
| 82 |
+
}
|
| 83 |
+
|
| 84 |
+
traverseFileTree(item, path = '') {
|
| 85 |
+
if (item.isFile) {
|
| 86 |
+
item.file((file) => {
|
| 87 |
+
this.files.push({ path: path + file.name, content: file });
|
| 88 |
+
this.updateFileList();
|
| 89 |
+
});
|
| 90 |
+
} else if (item.isDirectory) {
|
| 91 |
+
let dirReader = item.createReader();
|
| 92 |
+
dirReader.readEntries((entries) => {
|
| 93 |
+
for (let i = 0; i < entries.length; i++) {
|
| 94 |
+
this.traverseFileTree(entries[i], path + item.name + "/");
|
| 95 |
+
}
|
| 96 |
+
});
|
| 97 |
+
}
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
updateFileList() {
|
| 101 |
+
this.fileList.innerHTML = '';
|
| 102 |
+
for (let file of this.files) {
|
| 103 |
+
let listItem = document.createElement('li');
|
| 104 |
+
listItem.textContent = file.path;
|
| 105 |
+
this.fileList.appendChild(listItem);
|
| 106 |
+
}
|
| 107 |
}
|
| 108 |
|
| 109 |
async upload() {
|
|
|
|
| 151 |
|
| 152 |
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.`;
|
| 153 |
processingMessage.textContent = "All files processed";
|
| 154 |
+
this.files = [];
|
| 155 |
+
this.updateFileList();
|
| 156 |
} else {
|
| 157 |
messageDiv.textContent = 'Please select files to upload';
|
| 158 |
}
|