How to insert multiple images simultaneously in Rich Text Editor

[Stefan Colic]

Hi Syncfusion team,

I am trying to upload multiple images in the rich text editor at the same time, but I am struggling to do so. I have enabled multiple file selection in the file browser:

 (document.getElementsByClassName('e-uploader')[0] as any).ej2_instances[0].multiple = true;

And I was able to upload them on server successfully:

But when I click on "Insert" in the rich text editor, it only shows one image, regardless of how many I have selected and uploaded.

Thank you for your answers in advance.

Best regards,

Stefan.

[Vinothkumar Yuvaraj]

Hi Stefan,

We have fulfilled your request by utilizing the following code and the rich text editor dialogOpen event. Please refer to the enclosed sample and code for your convenience.

export class AppComponent {

    @ViewChild('RTEevents')

    private rteObj: RichTextEditorComponent;

    public data;

    dialogOpen(e): void {

        if(e.element.classList.contains("e-rte-img-dialog")){

            (document.getElementsByClassName('e-uploader')[0] as any).ej2_instances[0].multiple = true;

            (document.getElementsByClassName('e-uploader')[0] as any).ej2_instances[0].selected=(args)=>{

                this.data =  args.filesData;

                document.getElementsByClassName("e-rte-elements e-flat e-insertImage")[0].removeAttribute("disabled")

                document.getElementsByClassName("e-rte-elements e-flat e-insertImage")[0].addEventListener("click",()=>{

                for (let i = 0; i < this.data.length; i++) {

                    let file: File =  this.data[i].rawFile;

                    let reader: FileReader = new FileReader();

                    reader.addEventListener(

                    'load',

                    () => {

                        var src1 = reader.result;

                        this.rteObj.executeCommand('insertImage', {

                        url: reader.result.toString(),

                        });

                    },

                    false

                    );

                    reader.readAsDataURL(file);

                 } 

                 this.rteObj.closeDialog(DialogType.InsertImage)

                })

            }

        }

    }

}

We have created a sample application on StackBlitz. You can access it using the following link

Sample : https://stackblitz.com/edit/angular-zmnfpi?file=src%2Fapp.component.html,src%2Fapp.component.ts

API Link : https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor#dialogopen

Regards,

Vinothkumar