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
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
}) })
}
} }

1
src/components/PostEditor/Uploader.tsx

@ -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>
) )

Loading…
Cancel
Save