feat: Implement file upload progress tracking and enhance share link functionality

2025-06-07 23:54:32 +02:00 · 2025-06-07 23:54:32 +02:00 · 18f1cd150b
parent 2cf335c5ef
commit 18f1cd150b
4 changed files with 180 additions and 26 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Litecloud</title>
  </head>
  <body>
    <div id="root"></div>
--- a/frontend/src/components/FileComponent.tsx
+++ b/frontend/src/components/FileComponent.tsx
@ -26,9 +26,11 @@ export const FilesComponent: React.FC<FilesComponentProps> = ({ isDarkMode }) =>
  const [shareDuration, setShareDuration] = useState(7); // durata di default 7 giorni
  const [previewFile, setPreviewFile] = useState<{ url: string; name: string } | null>(null);
  const [previewBlobUrl, setPreviewBlobUrl] = useState<string | null>(null);
+  const [uploadProgress, setUploadProgress] = useState<number | null>(null);
+  const [uploadFileName, setUploadFileName] = useState<string | null>(null);
+  const [uploadStartTime, setUploadStartTime] = useState<number | null>(null);

  const fileInputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLTableDataCellElement | null>(null);

  // Recupera il token solo una volta al mount o quando cambia
  useEffect(() => {
@ -55,13 +57,21 @@ export const FilesComponent: React.FC<FilesComponentProps> = ({ isDarkMode }) =>
    if (token) fetchFiles();
  }, [token]);

+  // Fix gestione click fuori dal dropdown
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      // Se il dropdown è aperto e il click NON è dentro un menu dropdown, chiudi
+      const dropdowns = document.querySelectorAll('.custom-dropdown');
+      let clickedInside = false;
+      dropdowns.forEach(dropdown => {
+        if (dropdown.contains(event.target as Node)) {
+          clickedInside = true;
+        }
+      });
+      if (!clickedInside) {
        setOpenDropdown(null);
      }
    };
-
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);
@ -73,32 +83,51 @@ export const FilesComponent: React.FC<FilesComponentProps> = ({ isDarkMode }) =>
    try {
      setLoading(true);
      setError(null);
+      setUploadProgress(0);
+      setUploadFileName(file.name);
+      setUploadStartTime(Date.now());
      const formData = new FormData();
      formData.append('file', file);
      formData.append('filename', file.name);

      if (!token) throw new Error('No auth token found');
-      const response = await fetch('/api/upload', {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      if (response.ok) {
-        setSuccess('File uploaded successfully!');
-        fetchFiles();
-      } else {
-        throw new Error('Upload failed');
-      }
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', '/api/upload');
+      xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+      xhr.upload.onprogress = (e) => {
+        if (e.lengthComputable) {
+          setUploadProgress(Math.round((e.loaded / e.total) * 100));
+        }
+      };
+      xhr.onload = async () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          setSuccess('File uploaded successfully!');
+          fetchFiles();
+        } else {
+          setError('Upload failed');
+        }
+        setLoading(false);
+        setUploadProgress(null);
+        setUploadFileName(null);
+        setUploadStartTime(null);
+        if (fileInputRef.current) fileInputRef.current.value = '';
+      };
+      xhr.onerror = () => {
+        setError('Failed to upload file');
+        setLoading(false);
+        setUploadProgress(null);
+        setUploadFileName(null);
+        setUploadStartTime(null);
+        if (fileInputRef.current) fileInputRef.current.value = '';
+      };
+      xhr.send(formData);
    } catch (err) {
      setError('Failed to upload file - ' + (err instanceof Error ? err.message : 'Unknown error'));
-    } finally {
      setLoading(false);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
+      setUploadProgress(null);
+      setUploadFileName(null);
+      setUploadStartTime(null);
+      if (fileInputRef.current) fileInputRef.current.value = '';
    }
  };

@ -227,6 +256,18 @@ export const FilesComponent: React.FC<FilesComponentProps> = ({ isDarkMode }) =>

  // Funzione per ottenere la URL del file (puoi adattare se serve fetch protetto)

+  // Calcola il tempo rimanente stimato
+  const getEstimatedTimeLeft = () => {
+    if (uploadProgress === null || uploadProgress === 0 || !uploadStartTime) return null;
+    const now = Date.now();
+    const elapsed = (now - uploadStartTime) / 1000; // in secondi
+    const estimatedTotal = elapsed / (uploadProgress / 100);
+    const remaining = estimatedTotal - elapsed;
+    if (!isFinite(remaining) || remaining < 0) return null;
+    if (remaining < 60) return `${Math.round(remaining)}s`;
+    return `${Math.floor(remaining / 60)}m ${Math.round(remaining % 60)}s`;
+  };
+
  return (
    <div className="component-container">
      {/* Success/Error Messages */}
@ -306,7 +347,7 @@ export const FilesComponent: React.FC<FilesComponentProps> = ({ isDarkMode }) =>
                </td>
                <td className={`table-cell ${isDarkMode ? 'text-gray-300' : 'text-gray-500'}`}>{formatFileSize(file.size)}</td>
                <td className={`table-cell ${isDarkMode ? 'text-gray-300' : 'text-gray-500'}`}>{formatDate(file.uploaded_at)}</td>
-                <td className="table-cell relative actions-cell" ref={dropdownRef}>
+                <td className="table-cell relative actions-cell">
                  <button
                    onClick={() => setOpenDropdown(openDropdown === file.id ? null : file.id)}
                    className={`actions-button ellipsis-button ${isDarkMode ? 'actions-button-dark' : 'actions-button-light'}`}
@ -366,6 +407,32 @@ export const FilesComponent: React.FC<FilesComponentProps> = ({ isDarkMode }) =>
          </div>
        )}
      </div>
+
+      {/* Modal/progressbar upload */}
+      {uploadProgress !== null && uploadFileName && (
+        <div className="upload-progress-popout">
+          <div className="upload-progress-content">
+            <div className="upload-progress-filename">{uploadFileName}</div>
+            <div className="upload-progress-bar-container">
+              <svg className="upload-progress-svg" viewBox="0 0 40 40">
+                <circle className="upload-progress-bg" cx="20" cy="20" r="18" />
+                <circle
+                  className="upload-progress-bar"
+                  cx="20"
+                  cy="20"
+                  r="18"
+                  strokeDasharray={2 * Math.PI * 18}
+                  strokeDashoffset={2 * Math.PI * 18 * (1 - uploadProgress / 100)}
+                />
+                <text x="50%" y="54%" textAnchor="middle" className="upload-progress-text">{uploadProgress}%</text>
+              </svg>
+            </div>
+            <div className="upload-progress-eta">
+              {getEstimatedTimeLeft() ? `~${getEstimatedTimeLeft()} left` : ''}
+            </div>
+          </div>
+        </div>
+      )}
    </div>
  );
 };
--- a/frontend/src/components/ShareComponent.tsx
+++ b/frontend/src/components/ShareComponent.tsx
@ -84,7 +84,7 @@ export const SharesComponent: React.FC<SharesComponentProps> = ({ isDarkMode })

  const copyToClipboard = async (shareId: string) => {
    try {
-      const shareUrl = `${window.location.origin}/shared/${shareId}`;
+      const shareUrl = `${window.location.origin}/api/shared/${shareId}`;
      await navigator.clipboard.writeText(shareUrl);
      setSuccess('Share link copied to clipboard!');
    } catch (err) {
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -364,10 +364,12 @@ body, html, #root {

 /* Sidebar Title */
 .sidebar-title {
-  font-size: 1.5rem;
+  font-size: 2rem;
  font-weight: 700;
-  margin: 0 0 2rem 0;
+  letter-spacing: 0.05em;
+  margin-bottom: 2rem;
  text-align: center;
+  transition: color 0.3s;
 }

 /* Sidebar Navigation */
@ -930,3 +932,88 @@ body, html, #root {
    font-size: 0.875rem;
  }
 }
+
+/* Upload progress popout styles */
+.upload-progress-popout {
+  position: fixed;
+  right: 32px;
+  bottom: 32px;
+  z-index: 2000;
+  background: rgba(34, 34, 34, 0.95);
+  color: #fff;
+  border-radius: 18px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+  padding: 18px 28px 18px 18px;
+  min-width: 220px;
+  min-height: 110px;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  animation: popout-fadein 0.3s;
+}
+.upload-progress-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+.upload-progress-filename {
+  font-size: 1.05rem;
+  font-weight: 500;
+  margin-bottom: 2px;
+  text-align: center;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.upload-progress-bar-container {
+  width: 48px;
+  height: 48px;
+  position: relative;
+  margin-bottom: 2px;
+}
+.upload-progress-svg {
+  width: 48px;
+  height: 48px;
+}
+.upload-progress-bg {
+  fill: none;
+  stroke: #444;
+  stroke-width: 4;
+}
+.upload-progress-bar {
+  fill: none;
+  stroke: #4ade80;
+  stroke-width: 4;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.3s;
+}
+.upload-progress-text {
+  font-size: 0.95rem;
+  font-weight: 600;
+  fill: #fff;
+  dominant-baseline: middle;
+}
+.upload-progress-eta {
+  font-size: 0.92rem;
+  color: #b3e6c7;
+  margin-top: 2px;
+  text-align: center;
+}
+@media (max-width: 600px) {
+  .upload-progress-popout {
+    right: 8px;
+    bottom: 8px;
+    min-width: 150px;
+    padding: 10px 12px 10px 10px;
+  }
+  .upload-progress-bar-container, .upload-progress-svg {
+    width: 36px;
+    height: 36px;
+  }
+}
+@keyframes popout-fadein {
+  from { opacity: 0; transform: translateY(30px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}