Fortschrittsanzeige beim Upload (Dateien-Tool + öffentliche Upload-Seite), Drag&Drop auf Upload-Seite ergänzt

frontend/src/lib.js

@@ -15,6 +15,35 @@ export const api = async (path, { body, method, isFile } = {}) => {
   return data;
 };
 
+// ── Upload mit echtem Byte-Fortschritt ──────────────────────────────────────
+// fetch() liefert keinerlei Upload-Progress-Events, daher hier bewusst auf
+// XMLHttpRequest aufgebaut. Nur für Datei-Uploads gedacht (FormData-Body).
+// onProgress(percent: 0-100) wird während des Uploads laufend aufgerufen.
+export const apiUpload = (path, formData, { onProgress } = {}) => {
+  const token = localStorage.getItem('sk_token');
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', `/api${path}`);
+    if (token) xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+
+    xhr.upload.onprogress = e => {
+      if (e.lengthComputable && onProgress) {
+        onProgress(Math.round((e.loaded / e.total) * 100));
+      }
+    };
+
+    xhr.onload = () => {
+      let data = {};
+      try { data = JSON.parse(xhr.responseText); } catch { /* leere/ungültige Antwort */ }
+      if (xhr.status >= 200 && xhr.status < 300) resolve(data);
+      else reject(new Error(data.error || 'Fehler'));
+    };
+
+    xhr.onerror = () => reject(new Error('Verbindung fehlgeschlagen'));
+    xhr.send(formData);
+  });
+};
+
 // ── Design Tokens ─────────────────────────────────────────────────────────────
 // Einheitliche Styles für alle Tools – in jedem Tool importierbar
 export const S = {