attach multiple images in ngx-quill editor

Question

I am using ngx-quill editor in my angular project. By default it is supporting only one image at a time to select and upload. I am trying to configure editor to attach multiple images in one shot.

So far I have tried below but it is not working. I am not able to find any proper documentation.

 quillConfig = {
    modules: {
      toolbar: {
        container: [
          [{ header: [1, 2, false] }],
          [{ font: [] }],
          [{ header: 1 }, { header: 2 }],
          [{ list: 'ordered' }, { list: 'bullet' }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block', 'attachment'],
        ],
        handlers:{
          image: () => {
            let fileInput = document.createElement('input');
            fileInput.setAttribute('type', 'file');
            fileInput.setAttribute('multiple', 'multiple');
            fileInput.setAttribute('accept', 'image/*');
          
            fileInput.addEventListener('change', () => {
              const files = fileInput.files;
          
              if (files !== null) {
                for (let i = 0; i < files.length; i++) {
                  const reader = new FileReader();
                  const quill = new Quill('#editor'); 
          
                  reader.onload = (event) => {
                    const range = quill.getSelection(true);
                    quill.updateContents(new Delta()
                      .retain(range.index)
                      .delete(range.length)
                      .insert({ image: event.target!.result })
                    );
                  }
          
                  reader.readAsDataURL(files[i]);
                }
          
                fileInput.value = '';
              }
            });
            fileInput.click();
          }     
        },
      },

I am not sure what I am missing. If anyone can guide me here it would be great.

Answer 1

this is my config and it's working, let's try this ^^

handlers: {
            image: function imageHandler() {
              const input = document.createElement('input');
              input.setAttribute('type', 'file');
              input.setAttribute('accept', 'image/*');
              input.setAttribute('multiple', '');
              input.click();

              input.onchange = () => {
                const files = input.files;
                if (files) {
                  [].forEach.call(files, (file: File) => {
                    const reader = new FileReader();
                    reader.onload = () => {
                      const range = this['quill'].getSelection(true);
                      this['quill'].insertEmbed(
                        range.index,
                        'image',
                        reader?.result?.toString()
                      );
                    };
                    reader.readAsDataURL(file);
                  });
                }
              };
            },
          }