{
- e.preventDefault();
- setIsDragOver(true);
- }}
- onDragLeave={() => setIsDragOver(false)}
- onDrop={(e) => {
- e.preventDefault();
- setIsDragOver(false);
- if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
- const paths: string[] = [];
- for (let i = 0; i < e.dataTransfer.files.length; i++) {
- const f = e.dataTransfer.files[i];
- // In desktop webview with path property
- if ("path" in f && typeof (f as { path: string }).path === "string") {
- paths.push((f as { path: string }).path);
+ {activeTab === "upload" && (
+ <>
+ {/* File Dropzone */}
+
{
+ e.preventDefault();
+ setIsDragOver(true);
+ }}
+ onDragLeave={() => setIsDragOver(false)}
+ onDrop={(e) => {
+ e.preventDefault();
+ setIsDragOver(false);
+ if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+ const paths: string[] = [];
+ for (let i = 0; i < e.dataTransfer.files.length; i++) {
+ const f = e.dataTransfer.files[i];
+ if ("path" in f && typeof (f as { path: string }).path === "string") {
+ paths.push((f as { path: string }).path);
+ }
+ }
+ if (paths.length > 0) {
+ addPathsToQueue(paths);
+ }
}
- }
- if (paths.length > 0) {
- addPathsToQueue(paths);
- }
- }
- }}
- >
-
-
- {/* File Queue List */}
- 📥
-
- {isDragOver ? "Drop files now to add to queue" : "Drag and drop files here, or click to browse"}
-
-
- Supports any files: documents, media, archives, and directories
-
-
-
-
- {fileQueue.length === 0 ? (
-
- Upload Queue ({fileQueue.length})
- {fileQueue.length > 0 && (
-
- {formatBytes(totalQueueBytes)} • {pendingCount} Pending • {doneCount} Done
-
- )}
+ }}
+ >
+
- 📥
+
+ {isDragOver
+ ? "Drop files now to add to queue"
+ : "Drag and drop files here, or click to browse"}
+
+
+ Supports any files: documents, media, archives, and directories
+
- {doneCount > 0 && (
-
- )}
- {fileQueue.length > 0 && (
-
- )}
-
-
- Queue is empty. Drop files above or click to select files for uploading.
-
- ) : (
-
- {fileQueue.map((item, index) => (
-
handleDragStart(index)}
- onDragOver={(e) => handleDragOver(e, index)}
- onDragEnd={handleDragEnd}
- >
-
- ⋮⋮
-
- {index + 1}
+ {/* File Queue List */}
+
+
+
-
+ Upload Queue ({fileQueue.length})
+ {fileQueue.length > 0 && (
+
+ {formatBytes(totalQueueBytes)} • {pendingCount} Pending • {doneCount} Done
+ {errorCount > 0 && ` • ${errorCount} Failed`}
+
+ )}
+
+
+ {doneCount > 0 && (
+
+ )}
+ {fileQueue.length > 0 && (
+
+ )}
+
+
-
-
- {item.name}
- {item.path}
- {item.errorMessage && (
- Error: {item.errorMessage}
- )}
- {formatBytes(item.size)}
-
-
-
- {item.status.toUpperCase()}
+ {/* Overall Total Progress Bar */}
+ {(isUploading || doneCount > 0) && fileQueue.length > 0 && (
+
+ )}
- {/* Upload Settings */}
-
+
- )}
-
+
+ {isUploading
+ ? `Uploading File ${currentUploadingIndex} of ${fileQueue.length}...`
+ : doneCount === fileQueue.length
+ ? "All uploads complete!"
+ : "Upload batch progress"}
+
+
+ {formatBytes(totalTransferredBytes)} / {formatBytes(totalQueueBytes)} ({overallPercent}%)
-
-
-
-
-
+
- ))}
-
+
-
Upload Settings
-
-
- setRemoteDir(e.target.value)}
- placeholder="Uploads or Projects/Folder"
- />
-
+ {fileQueue.length === 0 ? (
+
+ Queue is empty. Drop files above or click to select files for uploading.
+
+ ) : (
+
+ {fileQueue.map((item, index) => {
+ const itemPercent =
+ item.size > 0
+ ? Math.min(100, Math.round((item.bytesTransferred / item.size) * 100))
+ : item.status === "done"
+ ? 100
+ : 0;
-
-
-
+ return (
+ handleDragStart(index)}
+ onDragOver={(e) => handleDragOver(e, index)}
+ onDragEnd={handleDragEnd}
+ >
+
- {r.direct_download_url && (
-
+ ⋮⋮
+
+ {index + 1}
- {createShare && (
-
-
- setSharePassword(e.target.value)}
- placeholder="Leave empty for public access without password"
- />
-
- )}
+
+
+ {/* Per-item progress bar when active or finished */}
+ {(item.status === "uploading" || item.status === "done") && (
+ {item.name}
+ {item.path}
-
-
+
+ )}
- {/* Completed Share Links & Results */}
- {fileQueue.some((q) => q.result) && (
-
+
+
+
+ {item.status === "done"
+ ? "100%"
+ : `${itemPercent}% (${formatBytes(item.bytesTransferred)} / ${formatBytes(
+ item.size
+ )})`}
+
+
-
+ )}
+
- Share Links & Direct Downloads
-
- {fileQueue
- .filter((q) => q.result)
- .map((item) => {
- const r = item.result!;
- return (
-
-
- {r.share_url && (
-
- {r.file_name}
- {formatBytes(r.bytes_uploaded)}
-
-
- Destination: {r.remote_path}
-
+ {item.errorMessage && (
+
+ Error: {item.errorMessage}
+
+
+ )}
+
-
-
-
+
- )}
+ );
+ })}
+ {formatBytes(item.size)}
+
+
+
+ {item.status.toUpperCase()}
+
+
+
+
+
+
+
+
-
-
+
)}