ui: use common upload function

packages/ui-default/pages/problem_edit.page.js

@@ -1,10 +1,11 @@
 import { size } from '@hydrooj/utils/lib/common';
 import $ from 'jquery';
 import _ from 'lodash';
-import Dialog, { ConfirmDialog } from 'vj/components/dialog';
+import { ConfirmDialog } from 'vj/components/dialog';
 import Dropdown from 'vj/components/dropdown/Dropdown';
 import Editor from 'vj/components/editor/index';
 import Notification from 'vj/components/notification';
+import uploadFiles from 'vj/components/upload';
 import download from 'vj/components/zipDownloader';
 import { NamedPage } from 'vj/misc/Page';
 import i18n from 'vj/utils/i18n';
@@ -22,10 +23,6 @@ function setDomSelected($dom, selected) {
   else $dom.removeClass('selected');
 }
 
-function onBeforeUnload(e) {
-  e.returnValue = '';
-}
-
 async function updateSelection() {
   dirtyCategories.forEach(({ type, category, subcategory }) => {
     let item = categories[category];
@@ -199,54 +196,9 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
     input.multiple = true;
     input.click();
     await new Promise((resolve) => { input.onchange = resolve; });
-    const { files } = input;
-    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);
-        data.append('type', 'additional_file');
-        data.append('operation', 'upload_file');
-        await request.postFile('./files', 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 uploadFiles('./files', input.files, {
+      type: 'additional_file',
+      singleFileUploadCallback: (file) => {
         $('.additionalfile-table tbody').append(
           $(tpl`<tr data-filename="${file.name}" data-size="${file.size.toString()}">
             <td class="col--name" title="${file.name}"><a href="./file/${file.name}?type=testdata">${file.name}</a></td>
@@ -254,15 +206,8 @@ export default new NamedPage(['problem_create', 'problem_edit'], (pagename) => {
             <td class="col--operation"><a href="javascript:;" name="testdata__delete"><span class="icon icon-delete"></span></a></td>
           </tr>`),
         );
-      }
-      window.removeEventListener('beforeunload', onBeforeUnload);
-      Notification.success(i18n('File uploaded successfully.'));
-    } catch (e) {
-      console.error(e);
-      Notification.error(i18n('File upload failed: {0}', e.toString()));
-    } finally {
-      dialog.close();
-    }
+      },
+    });
   }
 
   async function handleClickRemove(ev) {