feat: support multiple files upload

This commit is contained in:
codytseng
2025-07-28 22:41:34 +08:00
parent bcd149b304
commit de09942124
2 changed files with 74 additions and 67 deletions

View File

@@ -49,12 +49,12 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
view.dom.classList.remove(...DRAGOVER_CLASS_LIST) view.dom.classList.remove(...DRAGOVER_CLASS_LIST)
const items = Array.from(event.dataTransfer?.files ?? []) const items = Array.from(event.dataTransfer?.files ?? [])
const mediaFile = items.find( const mediaFiles = items.filter(
(item) => item.type.includes('image') || item.type.includes('video') (item) => item.type.includes('image') || item.type.includes('video')
) )
if (!mediaFile) return false if (!mediaFiles.length) return false
uploadFile(view, mediaFile, options) uploadFile(view, mediaFiles, options)
return true return true
} }
@@ -70,7 +70,7 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
) { ) {
const file = item.getAsFile() const file = item.getAsFile()
if (file) { if (file) {
uploadFile(view, file, options) uploadFile(view, [file], options)
handled = true handled = true
} }
} else if (item.kind === 'string' && item.type === 'text/plain') { } else if (item.kind === 'string' && item.type === 'text/plain') {
@@ -104,7 +104,12 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
} }
}) })
async function uploadFile(view: EditorView, file: File, options: ClipboardAndDropHandlerOptions) { async function uploadFile(
view: EditorView,
files: File[],
options: ClipboardAndDropHandlerOptions
) {
for (const file of files) {
const name = file.name const name = file.name
options.onUploadStart?.(file) options.onUploadStart?.(file)
@@ -179,4 +184,5 @@ async function uploadFile(view: EditorView, file: File, options: ClipboardAndDro
throw error throw error
}) })
}
} }

View File

@@ -53,6 +53,7 @@ export default function Uploader({
style={{ display: 'none' }} style={{ display: 'none' }}
onChange={handleFileChange} onChange={handleFileChange}
accept={accept} accept={accept}
multiple
/> />
</div> </div>
) )