Refactor dropzone (#31482)

Refactor the legacy code and remove some jQuery calls.

web_src/js/features/repo-issue-edit.js

@@ -1,15 +1,12 @@
 import $ from 'jquery';
 import {handleReply} from './repo-issue.js';
 import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
-import {createDropzone} from './dropzone.js';
-import {GET, POST} from '../modules/fetch.js';
+import {POST} from '../modules/fetch.js';
 import {showErrorToast} from '../modules/toast.js';
 import {hideElem, showElem} from '../utils/dom.js';
 import {attachRefIssueContextPopup} from './contextpopup.js';
 import {initCommentContent, initMarkupContent} from '../markup/content.js';
 
-const {csrfToken} = window.config;
-
 async function onEditContent(event) {
   event.preventDefault();
 
@@ -20,114 +17,27 @@ async function onEditContent(event) {
 
   let comboMarkdownEditor;
 
-  /**
-   * @param {HTMLElement} dropzone
-   */
-  const setupDropzone = async (dropzone) => {
-    if (!dropzone) return null;
-
-    let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
-    let fileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
-    const dz = await createDropzone(dropzone, {
-      url: dropzone.getAttribute('data-upload-url'),
-      headers: {'X-Csrf-Token': csrfToken},
-      maxFiles: dropzone.getAttribute('data-max-file'),
-      maxFilesize: dropzone.getAttribute('data-max-size'),
-      acceptedFiles: ['*/*', ''].includes(dropzone.getAttribute('data-accepts')) ? null : dropzone.getAttribute('data-accepts'),
-      addRemoveLinks: true,
-      dictDefaultMessage: dropzone.getAttribute('data-default-message'),
-      dictInvalidFileType: dropzone.getAttribute('data-invalid-input-type'),
-      dictFileTooBig: dropzone.getAttribute('data-file-too-big'),
-      dictRemoveFile: dropzone.getAttribute('data-remove-file'),
-      timeout: 0,
-      thumbnailMethod: 'contain',
-      thumbnailWidth: 480,
-      thumbnailHeight: 480,
-      init() {
-        this.on('success', (file, data) => {
-          file.uuid = data.uuid;
-          fileUuidDict[file.uuid] = {submitted: false};
-          const input = document.createElement('input');
-          input.id = data.uuid;
-          input.name = 'files';
-          input.type = 'hidden';
-          input.value = data.uuid;
-          dropzone.querySelector('.files').append(input);
-        });
-        this.on('removedfile', async (file) => {
-          document.querySelector(`#${file.uuid}`)?.remove();
-          if (disableRemovedfileEvent) return;
-          if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
-            try {
-              await POST(dropzone.getAttribute('data-remove-url'), {data: new URLSearchParams({file: file.uuid})});
-            } catch (error) {
-              console.error(error);
-            }
-          }
-        });
-        this.on('submit', () => {
-          for (const fileUuid of Object.keys(fileUuidDict)) {
-            fileUuidDict[fileUuid].submitted = true;
-          }
-        });
-        this.on('reload', async () => {
-          try {
-            const response = await GET(editContentZone.getAttribute('data-attachment-url'));
-            const data = await response.json();
-            // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
-            disableRemovedfileEvent = true;
-            dz.removeAllFiles(true);
-            dropzone.querySelector('.files').innerHTML = '';
-            for (const el of dropzone.querySelectorAll('.dz-preview')) el.remove();
-            fileUuidDict = {};
-            disableRemovedfileEvent = false;
-
-            for (const attachment of data) {
-              const imgSrc = `${dropzone.getAttribute('data-link-url')}/${attachment.uuid}`;
-              dz.emit('addedfile', attachment);
-              dz.emit('thumbnail', attachment, imgSrc);
-              dz.emit('complete', attachment);
-              fileUuidDict[attachment.uuid] = {submitted: true};
-              dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%';
-              const input = document.createElement('input');
-              input.id = attachment.uuid;
-              input.name = 'files';
-              input.type = 'hidden';
-              input.value = attachment.uuid;
-              dropzone.querySelector('.files').append(input);
-            }
-            if (!dropzone.querySelector('.dz-preview')) {
-              dropzone.classList.remove('dz-started');
-            }
-          } catch (error) {
-            console.error(error);
-          }
-        });
-      },
-    });
-    dz.emit('reload');
-    return dz;
-  };
-
   const cancelAndReset = (e) => {
     e.preventDefault();
     showElem(renderContent);
     hideElem(editContentZone);
-    comboMarkdownEditor.attachedDropzoneInst?.emit('reload');
+    comboMarkdownEditor.dropzoneReloadFiles();
   };
 
   const saveAndRefresh = async (e) => {
     e.preventDefault();
+    renderContent.classList.add('is-loading');
     showElem(renderContent);
     hideElem(editContentZone);
-    const dropzoneInst = comboMarkdownEditor.attachedDropzoneInst;
     try {
       const params = new URLSearchParams({
         content: comboMarkdownEditor.value(),
         context: editContentZone.getAttribute('data-context'),
         content_version: editContentZone.getAttribute('data-content-version'),
       });
-      for (const fileInput of dropzoneInst?.element.querySelectorAll('.files [name=files]')) params.append('files[]', fileInput.value);
+      for (const file of comboMarkdownEditor.dropzoneGetFiles() ?? []) {
+        params.append('files[]', file);
+      }
 
       const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params});
       const data = await response.json();
@@ -155,12 +65,14 @@ async function onEditContent(event) {
       } else {
         content.querySelector('.dropzone-attachments').outerHTML = data.attachments;
       }
-      dropzoneInst?.emit('submit');
-      dropzoneInst?.emit('reload');
+      comboMarkdownEditor.dropzoneSubmitReload();
       initMarkupContent();
       initCommentContent();
     } catch (error) {
+      showErrorToast(`Failed to save the content: ${error}`);
       console.error(error);
+    } finally {
+      renderContent.classList.remove('is-loading');
     }
   };
 
@@ -168,7 +80,6 @@ async function onEditContent(event) {
   if (!comboMarkdownEditor) {
     editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template').innerHTML;
     comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
-    comboMarkdownEditor.attachedDropzoneInst = await setupDropzone(editContentZone.querySelector('.dropzone'));
     editContentZone.querySelector('.ui.cancel.button').addEventListener('click', cancelAndReset);
     editContentZone.querySelector('.ui.primary.button').addEventListener('click', saveAndRefresh);
   }
@@ -176,6 +87,7 @@ async function onEditContent(event) {
   // Show write/preview tab and copy raw content as needed
   showElem(editContentZone);
   hideElem(renderContent);
+  // FIXME: ideally here should reload content and attachment list from backend for existing editor, to avoid losing data
   if (!comboMarkdownEditor.value()) {
     comboMarkdownEditor.value(rawContent.textContent);
   }
@@ -196,8 +108,8 @@ export function initRepoIssueCommentEdit() {
 
     let editor;
     if (this.classList.contains('quote-reply-diff')) {
-      const $replyBtn = $(this).closest('.comment-code-cloud').find('button.comment-form-reply');
-      editor = await handleReply($replyBtn);
+      const replyBtn = this.closest('.comment-code-cloud').querySelector('button.comment-form-reply');
+      editor = await handleReply(replyBtn);
     } else {
       // for normal issue/comment page
       editor = getComboMarkdownEditor($('#comment-form .combo-markdown-editor'));