v0.0.6: прогресс загрузки в строке (XMLHttpRequest onprogress)

2026-07-13 10:52:09 +04:00
parent e4975fb37e
commit 46d8ced0dd
2 changed files with 34 additions and 11 deletions
@@ -156,21 +156,44 @@ async function uploadFiles() {
  db.classList.remove('show');
  const total = sf.length;

-  // Фаза 1: загрузка
+  // Фаза 1: загрузка (XMLHttpRequest — прогресс в строке)
  for (let i = 0; i < total; i++) {
    const f = sf[i], n = i + 1;
-    ss(i, '<span style="color:#2563eb">⏳ загрузка</span>');
    st.className = 'status progress';
    st.textContent = 'Загрузка ' + n + '/' + total + ': ' + f.name;
-    const fd = new FormData();
-    fd.append('files', f, f.name);
-    if (currentSid) fd.append('session', currentSid);
    try {
-      const resp = await fetch('/api/upload', { method: 'POST', body: fd });
-      const data = await resp.json();
-      if (!data.ok) throw new Error(data.error);
-      currentSid = data.session;
-      ss(i, '<span style="color:#22c55e">✓ загружен</span>');
+      const t0 = performance.now();
+      await new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/api/upload');
+        xhr.upload.onprogress = function(e) {
+          if (e.lengthComputable) {
+            const pct = Math.round(e.loaded / e.total * 100);
+            ss(i, '<span style="color:#2563eb">⏳ ' + pct + '%</span>');
+          }
+        };
+        xhr.onload = function() {
+          if (xhr.status === 200) {
+            const data = JSON.parse(xhr.responseText);
+            if (data.ok) {
+              const elapsed = (performance.now() - t0) / 1000;
+              const speed = f.size / elapsed;
+              ss(i, '<span style="color:#22c55e">✓ ' + fs(speed) + '/s</span>');
+              currentSid = data.session;
+              resolve();
+            } else {
+              reject(new Error(data.error));
+            }
+          } else {
+            reject(new Error('HTTP ' + xhr.status));
+          }
+        };
+        xhr.onerror = function() { reject(new Error('Сеть')); };
+        const fd = new FormData();
+        fd.append('files', f, f.name);
+        if (currentSid) fd.append('session', currentSid);
+        xhr.send(fd);
+      });
    } catch (err) {
      ss(i, '<span style="color:#ef4444">✗</span>');
      st.className = 'status error';