2024-07-07 23:32:30 +08:00
import { svg } from '../svg.ts' ;
2024-06-21 15:40:33 +08:00
import { htmlEscape } from 'escape-goat' ;
import { clippie } from 'clippie' ;
2024-07-07 23:32:30 +08:00
import { showTemporaryTooltip } from '../modules/tippy.ts' ;
import { GET , POST } from '../modules/fetch.ts' ;
import { showErrorToast } from '../modules/toast.ts' ;
import { createElementFromHTML , createElementFromAttrs } from '../utils/dom.ts' ;
import { isImageFile , isVideoFile } from '../utils.ts' ;
2024-06-21 15:40:33 +08:00
const { csrfToken , i18n } = window . config ;
2024-06-27 17:31:49 +08:00
// 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' ;
2024-06-27 01:01:20 +08:00
async function createDropzone ( el , opts ) {
2021-04-09 10:32:30 +08:00
const [ { Dropzone } ] = await Promise . all ( [
2020-03-08 05:06:15 +08:00
import ( /* webpackChunkName: "dropzone" */ 'dropzone' ) ,
import ( /* webpackChunkName: "dropzone" */ 'dropzone/dist/dropzone.css' ) ,
] ) ;
return new Dropzone ( el , opts ) ;
}
2024-06-21 15:40:33 +08:00
2024-06-27 17:31:49 +08:00
export function generateMarkdownLinkForAttachment ( file , { width , dppx } = { } ) {
let fileMarkdown = ` [ ${ file . name } ](/attachments/ ${ file . uuid } ) ` ;
if ( isImageFile ( file ) ) {
fileMarkdown = ` ! ${ fileMarkdown } ` ;
if ( width > 0 && 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.
// Make the image link relative to the repo path, then the final URL is "/sub-path/owner/repo/attachments/{uuid}"
fileMarkdown = ` <img width=" ${ Math . round ( width / dppx ) } " alt=" ${ htmlEscape ( file . name ) } " src="attachments/ ${ htmlEscape ( file . uuid ) } "> ` ;
} else {
// Markdown always renders the image with a relative path, so the final URL is "/sub-path/owner/repo/attachments/{uuid}"
// TODO: it should also use relative path for consistency, because absolute is ambiguous for "/sub-path/attachments" or "/attachments"
fileMarkdown = ` ![ ${ file . name } ](/attachments/ ${ file . uuid } ) ` ;
}
} else if ( isVideoFile ( file ) ) {
fileMarkdown = ` <video src="attachments/ ${ htmlEscape ( file . uuid ) } " title=" ${ htmlEscape ( file . name ) } " controls></video> ` ;
}
return fileMarkdown ;
}
2024-06-27 01:01:20 +08:00
function addCopyLink ( file ) {
// Create a "Copy Link" element, to conveniently copy the image or file link as Markdown to the clipboard
// The "<a>" element has a hardcoded cursor: pointer because the default is overridden by .dropzone
const copyLinkEl = createElementFromHTML ( `
< div class = "tw-text-center" >
< a href = "#" class = "tw-cursor-pointer" > $ { svg ( 'octicon-copy' , 14 ) } Copy link < / a >
< / div > ` );
copyLinkEl . addEventListener ( 'click' , async ( e ) = > {
e . preventDefault ( ) ;
2024-06-27 17:31:49 +08:00
const success = await clippie ( generateMarkdownLinkForAttachment ( file ) ) ;
2024-08-10 17:46:48 +08:00
showTemporaryTooltip ( e . target as Element , success ? i18n.copy_success : i18n.copy_error ) ;
2024-06-27 01:01:20 +08:00
} ) ;
file . previewTemplate . append ( copyLinkEl ) ;
2024-06-21 15:40:33 +08:00
}
2024-06-27 01:01:20 +08:00
/ * *
* @param { HTMLElement } dropzoneEl
* /
export async function initDropzone ( dropzoneEl ) {
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 = { } ; // 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 = {
url : dropzoneEl.getAttribute ( 'data-upload-url' ) ,
2024-06-21 15:40:33 +08:00
headers : { 'X-Csrf-Token' : csrfToken } ,
2024-06-27 01:01:20 +08:00
acceptedFiles : [ '*/*' , '' ] . includes ( dropzoneEl . getAttribute ( 'data-accepts' ) ) ? null : dropzoneEl . getAttribute ( 'data-accepts' ) ,
2024-06-21 15:40:33 +08:00
addRemoveLinks : true ,
2024-06-27 01:01:20 +08:00
dictDefaultMessage : dropzoneEl.getAttribute ( 'data-default-message' ) ,
dictInvalidFileType : dropzoneEl.getAttribute ( 'data-invalid-input-type' ) ,
dictFileTooBig : dropzoneEl.getAttribute ( 'data-file-too-big' ) ,
dictRemoveFile : dropzoneEl.getAttribute ( 'data-remove-file' ) ,
2024-06-21 15:40:33 +08:00
timeout : 0 ,
thumbnailMethod : 'contain' ,
thumbnailWidth : 480 ,
thumbnailHeight : 480 ,
2024-06-27 01:01:20 +08:00
} ;
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 ) ;
2024-06-27 17:31:49 +08:00
dzInst . on ( 'success' , ( file , resp ) = > {
file . uuid = resp . uuid ;
2024-06-27 01:01:20 +08:00
fileUuidDict [ file . uuid ] = { submitted : false } ;
2024-06-27 17:31:49 +08:00
const input = createElementFromAttrs ( 'input' , { name : 'files' , type : 'hidden' , id : ` dropzone-file- ${ resp . uuid } ` , value : resp.uuid } ) ;
2024-06-27 01:01:20 +08:00
dropzoneEl . querySelector ( '.files' ) . append ( input ) ;
addCopyLink ( file ) ;
2024-06-27 17:31:49 +08:00
dzInst . emit ( DropzoneCustomEventUploadDone , { file } ) ;
2024-06-27 01:01:20 +08:00
} ) ;
dzInst . on ( 'removedfile' , async ( file ) = > {
if ( disableRemovedfileEvent ) return ;
2024-06-27 17:31:49 +08:00
dzInst . emit ( DropzoneCustomEventRemovedFile , { fileUuid : file.uuid } ) ;
2024-06-27 01:01:20 +08:00
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 fileUuid of Object . keys ( fileUuidDict ) ) {
fileUuidDict [ fileUuid ] . submitted = true ;
}
2024-06-21 15:40:33 +08:00
} ) ;
2024-06-27 01:01:20 +08:00
2024-06-27 17:31:49 +08:00
dzInst . on ( DropzoneCustomEventReloadFiles , async ( ) = > {
2024-06-27 01:01:20 +08:00
try {
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' ) . innerHTML = '' ;
for ( const el of dropzoneEl . querySelectorAll ( '.dz-preview' ) ) el . remove ( ) ;
fileUuidDict = { } ;
for ( const attachment of respData ) {
2024-06-27 17:31:49 +08:00
const file = { name : attachment.name , uuid : attachment.uuid , size : attachment.size } ;
dzInst . emit ( 'addedfile' , file ) ;
dzInst . emit ( 'complete' , file ) ;
2024-10-23 23:39:10 +08:00
if ( isImageFile ( file . name ) ) {
const imgSrc = ` ${ attachmentBaseLinkUrl } / ${ file . uuid } ` ;
dzInst . emit ( 'thumbnail' , file , imgSrc ) ;
}
2024-06-27 17:31:49 +08:00
addCopyLink ( file ) ; / / i t i s f r o m s e r v e r r e s p o n s e , s o n o " t y p e "
fileUuidDict [ file . uuid ] = { submitted : true } ;
const input = createElementFromAttrs ( 'input' , { name : 'files' , type : 'hidden' , id : ` dropzone-file- ${ file . uuid } ` , value : file.uuid } ) ;
2024-06-27 01:01:20 +08:00
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: ${ error } ` ) ;
console . error ( error ) ;
}
} ) ;
dzInst . on ( 'error' , ( file , message ) = > {
showErrorToast ( ` Dropzone upload error: ${ message } ` ) ;
dzInst . removeFile ( file ) ;
} ) ;
2024-06-27 17:31:49 +08:00
if ( listAttachmentsUrl ) dzInst . emit ( DropzoneCustomEventReloadFiles ) ;
2024-06-27 01:01:20 +08:00
return dzInst ;
2024-06-21 15:40:33 +08:00
}