Browse Source

feat: support multiple files upload

imwald
codytseng 8 months ago
parent
commit
de09942124
  1. 16
      src/components/PostEditor/PostTextarea/ClipboardAndDropHandler.ts
  2. 1
      src/components/PostEditor/Uploader.tsx

16
src/components/PostEditor/PostTextarea/ClipboardAndDropHandler.ts

@ -49,12 +49,12 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO @@ -49,12 +49,12 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
view.dom.classList.remove(...DRAGOVER_CLASS_LIST)
const items = Array.from(event.dataTransfer?.files ?? [])
const mediaFile = items.find(
const mediaFiles = items.filter(
(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
}
@ -70,7 +70,7 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO @@ -70,7 +70,7 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO
) {
const file = item.getAsFile()
if (file) {
uploadFile(view, file, options)
uploadFile(view, [file], options)
handled = true
}
} else if (item.kind === 'string' && item.type === 'text/plain') {
@ -104,7 +104,12 @@ export const ClipboardAndDropHandler = Extension.create<ClipboardAndDropHandlerO @@ -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
options.onUploadStart?.(file)
@ -180,3 +185,4 @@ async function uploadFile(view: EditorView, file: File, options: ClipboardAndDro @@ -180,3 +185,4 @@ async function uploadFile(view: EditorView, file: File, options: ClipboardAndDro
throw error
})
}
}

1
src/components/PostEditor/Uploader.tsx

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

Loading…
Cancel
Save