diff --git a/src/quill.imageCompressor.ts b/src/quill.imageCompressor.ts index 15f8424..c3229a1 100644 --- a/src/quill.imageCompressor.ts +++ b/src/quill.imageCompressor.ts @@ -55,6 +55,7 @@ class imageCompressor { this.fileHolder = document.createElement("input"); this.fileHolder.setAttribute("type", "file"); this.fileHolder.setAttribute("accept", "image/*"); + this.fileHolder.setAttribute("multiple", ""); this.fileHolder.setAttribute("style", "visibility:hidden"); this.fileHolder.onchange = () => this.fileChanged().then(() => onFileChanged && onFileChanged()); @@ -73,7 +74,10 @@ class imageCompressor { if (!files || !files.length) { return; } - const file = files[0]; + + const filesArray = Array.from(files) + + filesArray.forEach(async file => { this.Logger.log("fileChanged", { file }); if (!file) { return; @@ -83,6 +87,7 @@ class imageCompressor { base64ImageSrc ); this.insertToEditor(base64ImageSmallSrc, imageCompressor.b64toBlob(base64ImageSmallSrc)); + }) } async downscaleImageFromUrl(dataUrl: string) { diff --git a/src/quill.imageDrop.ts b/src/quill.imageDrop.ts index b052d4c..89236dd 100644 --- a/src/quill.imageDrop.ts +++ b/src/quill.imageDrop.ts @@ -37,25 +37,34 @@ export class ImageDrop { } const files = await getFilesFromDragEvent(evt); const filesFiltered = Array.from(files || []).filter(f => IsMatch(f.type)); - const firstImage = filesFiltered?.[0]; - if (firstImage) { - const base64ImageSrc = await file2b64(firstImage); - this.logger.log("handleNewImageFiles", { evt, files, filesFiltered, firstImage, base64ImageSrc }); - this.onNewDataUrl(base64ImageSrc); - return; - } - const blob = await getBlobFromDragEvent(evt); - if (!!blob) { - const base64ImageSrc = await file2b64(blob); - this.logger.log("handleNewImageFiles", { evt, blob, base64ImageSrc }); - this.onNewDataUrl(base64ImageSrc); - return; - } + + filesFiltered.forEach(async image => { + if (image) { + const base64ImageSrc = await file2b64(image); + this.logger.log("handleNewImageFiles", { evt, files, filesFiltered, image, base64ImageSrc }); + this.onNewDataUrl(base64ImageSrc); + return; + } + + const blob = await getBlobFromDragEvent(evt); + if (!!blob) { + const base64ImageSrc = await file2b64(blob); + this.logger.log("handleNewImageFiles", { evt, blob, base64ImageSrc }); + this.onNewDataUrl(base64ImageSrc); + return; + } + }) } private async handlePaste(evt: ClipboardEvent) { const files = Array.from(evt?.clipboardData?.items || []); this.logger.log("handlePaste", { files, evt }); + + // Text pasted from word will contain text/rtf + const isRichTextPaste = files.find(f => f.type === 'text/rtf') + if (isRichTextPaste) { + return; + } const images = files.filter(f => IsMatch(f.type)); this.logger.log("handlePaste", { images, evt }); if (!images.length) { @@ -68,13 +77,16 @@ export class ImageDrop { return; } evt.preventDefault(); - const blob = images.pop()?.getAsFile(); - if (!blob) { - return; - } - const base64ImageSrc = await file2b64(blob); - this.logger.log("handleNewImageFiles", { base64ImageSrc }); - this.onNewDataUrl(base64ImageSrc); + + imagesNoHtml.forEach(async image => { + const blob = image?.getAsFile() + if (!blob) { + return; + } + const base64ImageSrc = await file2b64(blob); + this.logger.log("handleNewImageFiles", { base64ImageSrc }); + this.onNewDataUrl(base64ImageSrc); + }) } }