Upload 2260 files

public/js/api.js

@@ -16,24 +16,69 @@ const API = (() => {
     }
     const res = await fetch(base + url, { method, headers, body: payload });
     if (!res.ok) {
-      let msg = 'Ошибка запроса';
-      try { msg = (await res.json()).error || msg; } catch (e) {}
-      // сессия истекла или недействительна — не оставляем пользователя
-      // молча биться в стену, а отправляем обратно на вход
-      if (res.status === 401 && !url.startsWith('/webauthn/') && !url.startsWith('/auth/login') && !url.startsWith('/auth/register') && !url.startsWith('/share/')) {
-        sessionStorage.clear();
-        if (!location.pathname.endsWith('index.html') && !location.pathname.endsWith('share.html')) {
-          location.href = 'index.html?expired=1';
-        }
-      }
-      const err = new Error(msg);
-      err.status = res.status;
-      throw err;
+      let msg = '';
+      try { msg = (await res.json()).error || ''; } catch (e) {}
+      throw failure(res.status, url, msg);
     }
     const ct = res.headers.get('content-type') || '';
     if (ct.includes('application/json')) return res.json();
     return res.arrayBuffer();
   }
+
+  // Разбор неуспешного ответа, общий для fetch- и XHR-путей.
+  function failure(status, url, msg) {
+    // сессия истекла или недействительна — не оставляем пользователя
+    // молча биться в стену, а отправляем обратно на вход
+    if (status === 401 && !url.startsWith('/webauthn/') && !url.startsWith('/auth/login') && !url.startsWith('/auth/register') && !url.startsWith('/share/')) {
+      sessionStorage.clear();
+      if (!location.pathname.endsWith('index.html') && !location.pathname.endsWith('share.html')) {
+        location.href = 'index.html?expired=1';
+      }
+    }
+    const err = new Error(msg || 'Ошибка запроса');
+    err.status = status;
+    return err;
+  }
+
+  // fetch() не сообщает, сколько байт тела уже ушло на сервер, поэтому запросы
+  // с полосой прогресса идут через XHR — только ради событий progress.
+  // onUploadProgress/onDownloadProgress получают долю 0..1 и вызываются лишь
+  // когда известен полный размер; без них запрос ведёт себя как обычный.
+  function reqWithProgress(method, url, body, opts = {}) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open(method, base + url);
+      xhr.responseType = 'arraybuffer';
+      const t = token();
+      if (t) xhr.setRequestHeader('Authorization', 'Bearer ' + t);
+      for (const [k, v] of Object.entries(opts.headers || {})) xhr.setRequestHeader(k, v);
+      let payload = body;
+      if (body && !opts.form) {
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        payload = JSON.stringify(body);
+      }
+      const track = (target, cb) => {
+        if (cb) target.onprogress = (e) => { if (e.lengthComputable && e.total) cb(e.loaded / e.total); };
+      };
+      track(xhr.upload, opts.onUploadProgress);
+      track(xhr, opts.onDownloadProgress);
+      xhr.onload = () => {
+        const text = () => new TextDecoder().decode(xhr.response || new ArrayBuffer(0));
+        if (xhr.status < 200 || xhr.status > 299) {
+          let msg = '';
+          try { msg = JSON.parse(text()).error || ''; } catch (e) {}
+          return reject(failure(xhr.status, url, msg));
+        }
+        if ((xhr.getResponseHeader('content-type') || '').includes('application/json')) {
+          try { return resolve(JSON.parse(text())); } catch (e) { return reject(new Error('Некорректный ответ сервера')); }
+        }
+        resolve(xhr.response);
+      };
+      xhr.onerror = () => reject(new Error('Нет связи с сервером'));
+      xhr.onabort = () => reject(new Error('Загрузка отменена'));
+      xhr.send(payload === undefined ? null : payload);
+    });
+  }
   return {
     register: (username, password) => req('POST', '/auth/register', { username, password }),
     login: (username, password) => req('POST', '/auth/login', { username, password }),
@@ -44,9 +89,9 @@ const API = (() => {
     deleteFolder: (id) => req('DELETE', `/folders/${id}`),
     rubbish: () => req('GET', '/rubbish'),
     emptyRubbish: () => req('POST', '/rubbish/empty', {}),
-    async uploadFile(formData) {
-      return req('POST', '/files/upload', formData, { form: true });
-    },
+    // onProgress получает долю отправленных байт (0..1)
+    uploadFile: (formData, onProgress) =>
+      reqWithProgress('POST', '/files/upload', formData, { form: true, onUploadProgress: onProgress }),
     fileMeta: (id) => req('GET', `/files/${id}/meta`),
     downloadFile: (id) => req('GET', `/files/${id}/download`),
     patchFile: (id, body) => req('PATCH', `/files/${id}`, body),
@@ -59,8 +104,11 @@ const API = (() => {
     shareMeta: (publicId) => req('GET', `/share/${publicId}/meta`),
     shareUnlock: (publicId, verifier) => req('POST', `/share/${publicId}/unlock`, { verifier }),
     // верификатор идёт заголовком, а не в URL: так он не попадёт в логи прокси
-    shareDownload: (publicId, verifier) =>
-      req('GET', `/share/${publicId}/download`, undefined, verifier ? { headers: { 'x-share-verifier': verifier } } : {}),
+    shareDownload: (publicId, verifier, onProgress) =>
+      reqWithProgress('GET', `/share/${publicId}/download`, undefined, {
+        headers: verifier ? { 'x-share-verifier': verifier } : {},
+        onDownloadProgress: onProgress,
+      }),
     // WebAuthn / биометрия
     webauthnRegisterOptions: () => req('POST', '/webauthn/register-options', {}),
     webauthnRegisterVerify: (attestationResponse, deviceLabel) => req('POST', '/webauthn/register-verify', { attestationResponse, deviceLabel }),

public/js/app.js

@@ -1002,7 +1002,13 @@ async function handleUpload(fileList) {
     const fill = row.querySelector('.progress-fill');
     const pctEl = row.querySelector('.fname span:last-child');
     try {
-      await uploadOne(file, (pct) => { fill.style.width = pct + '%'; pctEl.textContent = pct + '%'; });
+      // события прогресса сыпятся часто — перерисовываем только на смене процента
+      let shown = -1;
+      await uploadOne(file, (pct) => {
+        if (pct === shown) return;
+        shown = pct;
+        fill.style.width = pct + '%'; pctEl.textContent = pct + '%';
+      });
       fill.style.width = '100%'; pctEl.innerHTML = icon('check', 'icon-sm');
     } catch (e) {
       pctEl.textContent = 'Ошибка';
@@ -1014,15 +1020,21 @@ async function handleUpload(fileList) {
   load(); refreshQuota();
 }
 
+// Вехи полосы загрузки. Чтение и шифрование быстрые и от сети не зависят,
+// поэтому им отдано только начало шкалы; всё остальное — отправка, где прогресс
+// приходит от XHR по фактически ушедшим байтам. При отправке до 100% не
+// дотягиваем: последние проценты закрывает ответ сервера, иначе полоса
+// показывала бы «готово», пока сервер ещё принимает файл.
+const UP_READ = 4, UP_ENCRYPTED = 12, UP_SENT = 97;
+
 async function uploadOne(file, onProgress) {
   const fileKey = await VLT.generateFileKey();
   const buffer = await file.arrayBuffer();
-  onProgress(20);
+  onProgress(UP_READ);
   const { ciphertext, iv } = await VLT.encryptBuffer(fileKey, buffer);
-  onProgress(45);
   const { data: attrsEncrypted, iv: attrsIv } = await VLT.encryptJson(fileKey, { name: file.name, type: file.type });
   const { keyWrapped, keyWrapIv } = await VLT.wrapFileKey(masterKey, fileKey);
-  onProgress(60);
+  onProgress(UP_ENCRYPTED);
 
   const form = new FormData();
   form.append('blob', new Blob([ciphertext]), 'blob');
@@ -1034,7 +1046,9 @@ async function uploadOne(file, onProgress) {
   form.append('keyWrapped', keyWrapped);
   form.append('keyWrapIv', keyWrapIv);
 
-  await API.uploadFile(form);
+  await API.uploadFile(form, (ratio) => {
+    onProgress(UP_ENCRYPTED + Math.round(ratio * (UP_SENT - UP_ENCRYPTED)));
+  });
   onProgress(100);
 }
 

public/js/share.js

@@ -134,10 +134,13 @@ async function showFile(publicId, meta, fileKey) {
     const progLine = document.getElementById('progLine');
     const progFill = document.getElementById('progFill');
     btn.disabled = true; btn.innerHTML = `${icon('download', 'icon-sm')} Скачивание…`;
-    progLine.style.display = 'block'; progFill.style.width = '30%';
+    progLine.style.display = 'block'; progFill.style.width = '0%';
     try {
-      const buf = await API.shareDownload(publicId, shareVerifier);
-      progFill.style.width = '70%';
+      // полоса идёт по фактически полученным байтам; остаток шкалы оставлен
+      // на расшифровку, она начинается только после полной загрузки
+      const buf = await API.shareDownload(publicId, shareVerifier, (ratio) => {
+        progFill.style.width = (ratio * 92).toFixed(1) + '%';
+      });
       const plain = await VLT.decryptBuffer(fileKey, VLT.b64.toBuf(meta.contentIv), buf);
       progFill.style.width = '100%';
       const blob = new Blob([plain], { type: attrs.type || 'application/octet-stream' });