snapshot of https://github.com/go-gitea/gitea.git (main, 2026-09-15; blobs > 131072B omitted)

web_src/js/features/dropzone.ts

@@ -0,0 +1,194 @@
+import {svgRaw} from '../svg.ts';
+import {html} from '../utils/html.ts';
+import {GET, POST} from '../modules/fetch.ts';
+import {showErrorToast} from '../modules/toast.ts';
+import {createElementFromAttrs, queryElems, showElem} from '../utils/dom.ts';
+import {errorMessage} from '../modules/errors.ts';
+import {isImageFile, isVideoFile} from '../utils.ts';
+import type Dropzone from '@deltablot/dropzone';
+
+type CustomDropzoneFile = {
+  uuid: string;
+
+  // the following fields are from Dropzone.DropzoneFile
+  previewElement?: HTMLElement; // will be set during the "addedfile" event
+  name: string;
+  size: number;
+};
+
+type UploadResponse = {uuid: string};
+type FileUuidDict = Record<string, {submitted: boolean}>;
+
+// dropzone has its owner event dispatcher (emitter)
+export const DropzoneCustomEventReloadFiles = 'dropzone-custom-reload-files';
+export const DropzoneCustomEventRemovedFile = 'dropzone-custom-removed-file';
+export const DropzoneCustomEventUploadDone = 'dropzone-custom-upload-done';
+
+async function createDropzone(el: HTMLElement, opts: Dropzone.DropzoneOptions) {
+  const [{default: Dropzone}] = await Promise.all([
+    import('@deltablot/dropzone'),
+    import('@deltablot/dropzone/dist/dropzone.css'),
+  ]);
+  return new Dropzone(el, opts);
+}
+
+export function generateMarkdownLinkForAttachment(file: {uuid: string, name: string}, {width, dppx}: {width?: number, dppx?: number} = {}) {
+  // Markdown always renders the image with a relative path, so the final URL is "/sub-path/owner/repo/attachments/{uuid}"
+  let fileMarkdown = `[${file.name}](attachments/${file.uuid})`;
+  if (isImageFile({name: file.name, type: null})) {
+    if (width && width > 0 && dppx && dppx > 1) {
+      // Scale down images from HiDPI monitors. This uses the <img> tag because it's the only
+      // method to change image size in Markdown that is supported by all implementations.
+      fileMarkdown = html`<img width="${Math.round(width / dppx)}" alt="${file.name}" src="attachments/${file.uuid}">`;
+    } else {
+      fileMarkdown = `![${file.name}](attachments/${file.uuid})`;
+    }
+  } else if (isVideoFile({name: file.name, type: null})) {
+    fileMarkdown = html`<video src="attachments/${file.uuid}" title="${file.name}" controls></video>`;
+  }
+  return fileMarkdown;
+}
+
+export function decorateAttachmentPreview(dzInst: Dropzone, file: CustomDropzoneFile, attachmentBaseLinkUrl: string) {
+  const el = file.previewElement!;
+  if (attachmentBaseLinkUrl) {
+    // TODO: REPO-UPLOAD-FILE-VIEW: repo file upload doesn't support viewing the uploaded file yet
+    const fileUrl = `${attachmentBaseLinkUrl}/${file.uuid}`;
+    queryElems<HTMLAnchorElement>(el, 'a[data-dz-custom-link]', (elLink) => {
+      elLink.target = '_blank';
+      elLink.href = fileUrl;
+    });
+  }
+  const needUuidLink = dzInst.element.getAttribute('data-need-uuid-link') === 'true';
+  if (needUuidLink) {
+    // only issues and comments need to show use the UUID link
+    const elCopyLink = el.querySelector<HTMLButtonElement>('button[data-dz-custom-copy-link]')!;
+    const markdownLink = generateMarkdownLinkForAttachment(file);
+    el.setAttribute('data-tooltip-content', `Name: ${file.name}\nUUID: ${file.uuid}`);
+    elCopyLink.setAttribute('data-clipboard-text', markdownLink);
+    showElem(elCopyLink);
+  }
+}
+
+/**
+ * @param {HTMLElement} dropzoneEl
+ */
+export async function initDropzone(dropzoneEl: HTMLElement) {
+  const listAttachmentsUrl = dropzoneEl.closest('[data-attachment-url]')?.getAttribute('data-attachment-url');
+  const removeAttachmentUrl = dropzoneEl.getAttribute('data-remove-url')!;
+  const attachmentBaseLinkUrl = dropzoneEl.getAttribute('data-link-url')!;
+
+  let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
+  let fileUuidDict: 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 opts: Dropzone.DropzoneOptions = {
+    url: dropzoneEl.getAttribute('data-upload-url')!,
+    dictInvalidFileType: dropzoneEl.getAttribute('data-text-invalid-input-type')!,
+    dictFileTooBig: dropzoneEl.getAttribute('data-text-file-too-big')!,
+    timeout: 0,
+    thumbnailMethod: 'contain',
+    thumbnailWidth: 480,
+    thumbnailHeight: 480,
+    // template reference: preview-template.js in the dropzone source code
+    previewTemplate: html`
+      <div class="dz-preview dz-file-preview">
+        <div class="dz-default dz-message">
+          <button class="dz-button" type="button">${dropzoneEl.getAttribute('data-text-default-message')!}</button>
+        </div>
+        <div class="dz-image"><a data-dz-custom-link><img data-dz-thumbnail/></a></div>
+        <div class="dz-details">
+          <div class="dz-size"><span data-dz-size></span></div>
+          <a class="dz-filename muted" data-dz-custom-link><span data-dz-name></span></a>
+        </div>
+        <div class="dz-progress">
+          <span class="dz-upload" data-dz-uploadprogress></span>
+        </div>
+        <div class="dz-error-message"><span data-dz-errormessage></span></div>
+        <div class="dz-success-mark">${svgRaw('octicon-check-circle', 54, 'tw-text-green')}</div>
+        <div class="dz-error-mark">${svgRaw('octicon-x-circle', 54, 'tw-text-red')}</div>
+        <div class="dz-custom-buttons">
+          <button type="button" class="btn" data-dz-remove>${dropzoneEl.getAttribute('data-text-remove-file')!}</button>
+          <button type="button" class="btn tw-hidden" data-dz-custom-copy-link>${svgRaw('octicon-copy', 14)} ${dropzoneEl.getAttribute('data-text-copy-link')!}</button>
+        </div>
+      </div>
+    `,
+  };
+  const accepts = dropzoneEl.getAttribute('data-accepts')!;
+  if (!['*/*', ''].includes(accepts)) opts.acceptedFiles = accepts;
+  if (dropzoneEl.hasAttribute('data-max-file')) opts.maxFiles = Number(dropzoneEl.getAttribute('data-max-file'));
+  if (dropzoneEl.hasAttribute('data-max-size')) opts.maxFilesize = Number(dropzoneEl.getAttribute('data-max-size'));
+
+  // there is a bug in dropzone: if a non-image file is uploaded, then it tries to request the file from server by something like:
+  // "http://localhost:3000/owner/repo/issues/[object%20Event]"
+  // the reason is that the preview "callback(dataURL)" is assign to "img.onerror" then "thumbnail" uses the error object as the dataURL and generates '<img src="[object Event]">'
+  const dzInst = await createDropzone(dropzoneEl, opts);
+  dzInst.on('success', (file: CustomDropzoneFile, resp: UploadResponse) => {
+    file.uuid = resp.uuid;
+    fileUuidDict[file.uuid] = {submitted: false};
+    const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${resp.uuid}`, value: resp.uuid});
+    dropzoneEl.querySelector('.files')!.append(input);
+    decorateAttachmentPreview(dzInst, file, attachmentBaseLinkUrl);
+    dzInst.emit(DropzoneCustomEventUploadDone, {file});
+  });
+
+  dzInst.on('removedfile', async (file: CustomDropzoneFile) => {
+    if (disableRemovedfileEvent) return;
+
+    dzInst.emit(DropzoneCustomEventRemovedFile, {fileUuid: file.uuid});
+    document.querySelector(`#dropzone-file-${file.uuid}`)?.remove();
+    // when the uploaded file number reaches the limit, there is no uuid in the dict, and it doesn't need to be removed from server
+    if (removeAttachmentUrl && fileUuidDict[file.uuid] && !fileUuidDict[file.uuid].submitted) {
+      await POST(removeAttachmentUrl, {data: new URLSearchParams({file: file.uuid})});
+    }
+  });
+
+  dzInst.on('submit', () => {
+    for (const value of Object.values(fileUuidDict)) {
+      value.submitted = true;
+    }
+  });
+
+  dzInst.on(DropzoneCustomEventReloadFiles, async () => {
+    try {
+      if (!listAttachmentsUrl) return;
+      const resp = await GET(listAttachmentsUrl);
+      const respData = await resp.json();
+      // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
+      disableRemovedfileEvent = true;
+      dzInst.removeAllFiles(true);
+      disableRemovedfileEvent = false;
+
+      dropzoneEl.querySelector('.files')!.replaceChildren();
+      for (const el of dropzoneEl.querySelectorAll('.dz-preview')) el.remove();
+      fileUuidDict = {};
+      for (const attachment of respData) {
+        const file: CustomDropzoneFile = {name: attachment.name, uuid: attachment.uuid, size: attachment.size};
+        dzInst.emit('addedfile', file);
+        dzInst.emit('complete', file);
+        if (isImageFile({name: file.name, type: null})) {
+          const imgSrc = `${attachmentBaseLinkUrl}/${file.uuid}`;
+          dzInst.emit('thumbnail', file, imgSrc);
+        }
+        decorateAttachmentPreview(dzInst, file, attachmentBaseLinkUrl); // it is from server response, so no "type"
+        fileUuidDict[file.uuid] = {submitted: true};
+        const input = createElementFromAttrs('input', {name: 'files', type: 'hidden', id: `dropzone-file-${file.uuid}`, value: file.uuid});
+        dropzoneEl.querySelector('.files')!.append(input);
+      }
+      if (!dropzoneEl.querySelector('.dz-preview')) {
+        dropzoneEl.classList.remove('dz-started');
+      }
+    } catch (error) {
+      // TODO: if listing the existing attachments failed, it should stop from operating the content or attachments,
+      //  otherwise the attachments might be lost.
+      showErrorToast(`Failed to load attachments: ${errorMessage(error)}`);
+      console.error(error);
+    }
+  });
+
+  dzInst.on('error', (file, message) => {
+    showErrorToast(`Dropzone upload error: ${message}`);
+    dzInst.removeFile(file);
+  });
+
+  if (listAttachmentsUrl) dzInst.emit(DropzoneCustomEventReloadFiles);
+  return dzInst;
+}