ui: use common upload function

packages/ui-default/components/upload.ts

@@ -0,0 +1,77 @@
+import { Dialog } from 'vj/components/dialog/index';
+import Notification from 'vj/components/notification';
+import delay from 'vj/utils/delay';
+import i18n from 'vj/utils/i18n';
+import pjax from 'vj/utils/pjax';
+import request from 'vj/utils/request';
+
+function onBeforeUnload(e) {
+  e.returnValue = '';
+}
+
+interface UploadOptions {
+  type?: string;
+  pjax?: boolean;
+  singleFileUploadCallback?: (file: File) => any;
+}
+export default async function uploadFiles(endpoint = '', files: File[] | FileList, options: UploadOptions = {}) {
+  const dialog = new Dialog({
+    $body: `
+      <div class="file-label" style="text-align: center; margin-bottom: 5px; color: gray; font-size: small;"></div>
+      <div class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+        <div class="file-progress bp4-progress-meter" style="width: 0"></div>
+      </div>
+      <div class="upload-label" style="text-align: center; margin: 5px 0; color: gray; font-size: small;"></div>
+      <div class="bp4-progress-bar bp4-intent-primary bp4-no-stripes">
+        <div class="upload-progress bp4-progress-meter" style="width: 0"></div>
+      </div>`,
+  });
+  try {
+    Notification.info(i18n('Uploading files...'));
+    window.addEventListener('beforeunload', onBeforeUnload);
+    dialog.open();
+    const $uploadLabel = dialog.$dom.find('.dialog__body .upload-label');
+    const $uploadProgress = dialog.$dom.find('.dialog__body .upload-progress');
+    const $fileLabel = dialog.$dom.find('.dialog__body .file-label');
+    const $fileProgress = dialog.$dom.find('.dialog__body .file-progress');
+    for (const i in files) {
+      if (Number.isNaN(+i)) continue;
+      const file = files[i];
+      const data = new FormData();
+      data.append('filename', file.name);
+      data.append('file', file);
+      if (options.type) data.append('type', options.type);
+      data.append('operation', 'upload_file');
+      await request.postFile(endpoint, data, {
+        xhr() {
+          const xhr = new XMLHttpRequest();
+          xhr.upload.addEventListener('loadstart', () => {
+            $fileLabel.text(`[${+i + 1}/${files.length}] ${file.name}`);
+            $fileProgress.width(`${Math.round((+i + 1) / files.length * 100)}%`);
+            $uploadLabel.text(i18n('Uploading... ({0}%)', 0));
+            $uploadProgress.width(0);
+          });
+          xhr.upload.addEventListener('progress', (e) => {
+            if (e.lengthComputable) {
+              const percentComplete = Math.round((e.loaded / e.total) * 100);
+              if (percentComplete === 100) $uploadLabel.text(i18n('Processing...'));
+              else $uploadLabel.text(i18n('Uploading... ({0}%)', percentComplete));
+              $uploadProgress.width(`${percentComplete}%`);
+            }
+          }, false);
+          return xhr;
+        },
+      });
+      await options.singleFileUploadCallback?.(file);
+    }
+    window.removeEventListener('beforeunload', onBeforeUnload);
+    Notification.success(i18n('File uploaded successfully.'));
+    if (options.pjax) await pjax.request({ push: false });
+  } catch (e) {
+    console.error(e);
+    Notification.error(i18n('File upload failed: {0}', e.toString()));
+  } finally {
+    await delay(500);
+    dialog.close();
+  }
+}