Quill toolbar multiple Images select

Question

I am able to select only one image using the toolbar image select button . Using Image drop module I can able to drop many images at a time , but wondering Is there any way I can select multiple images in single select using toolbar image select button ( Using image handler ..? ) Thanks

Answer 1

let toolbarOptions = {
      container: [
        ['image', 'link'],
        ['clean'],
        ['bold', 'underline', 'strike'],
        [{'color': []}, {'size':[]}],
        [{'align': []}],
      ],
      handlers: {
        image: handleQuillImage,
      }
    };
    function getFileDataUrl (file) {
      return new Promise((resolve) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => resolve(fileReader.result);
        fileReader.readAsDataURL(file);
      });
    }
    function handleQuillImage(value) {
      const quillInstance = this;
      let fileInput = quillInstance.container.querySelector('input.ql-image[type=file]');
      if (fileInput == null) {
        fileInput = document.createElement('input');
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute('multiple', 'multiple');
        fileInput.setAttribute('accept', 'image/jpg, image/jpeg, image/png, image/gif');
        fileInput.classList.add('ql-image');

        fileInput.onchange = async function() {
          if (fileInput.files == null) return;
          if (fileInput.files[0] == null) return;
          let files =  [...fileInput.files];
          let fileResults = await Promise.all(files.map(file => getFileDataUrl(file)));

          fileResults.forEach(fileResult => {
            const range = quillInstance.quill.getSelection(true);
            quillInstance.quill.insertEmbed(range.index, 'image', fileResult);
            quillInstance.quill.setSelection(range.index+1, 'image', Quill.sources.SILENT);
          });
        }
        quillInstance.container.appendChild(fileInput);
      }
      fileInput.click();
      quillInstance.quill.focus();
    }

    let quillOptions = {
      theme: 'snow',
      placeholder: '내용을 입력해 주세요.',
      modules: {
        toolbar: toolbarOptions,
      },
    }

    let quill = new Quill('#editor', quillOptions);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<div id="editor"></div>

thanks!

Answer 2

Was searching for answer on this, but found nothing straightforward, so consider my working solution with addHandler and insertEmbed methods from quill API doc. Read inline comments for more details. Also with this approach you can create upload image logic or any other middleware processing you want.

//
// Init Quill
const quill = new Quill('#quill', {
  theme: 'snow',
  modules: {
    toolbar: [
      ['image']
    ]
  }
});

//
// Add handler for Image
const toolbar = quill.getModule('toolbar');
toolbar.addHandler('image', function() {
  //
  // Most of this code taken from
  // Quill library iself, from image
  // isertion part
  //
  const _this3 = this;
  let fileInput = this.container.querySelector('input.ql-image[type=file]');
  if (fileInput == null) {
    fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    //
    // Adding line below with multiple
    // to allow selecting multiple images
    fileInput.setAttribute('multiple', 'multiple');
    //
    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    fileInput.classList.add('ql-image');
    fileInput.addEventListener('change', function () {
      if (fileInput.files != null && fileInput.files[0] != null) {
        //
        // Adding loop to process each
        // selected image
        for(let i = 0; i < fileInput.files.length; i++) {
          const reader = new FileReader();
          reader.onload = function (e) {
            const range = _this3.quill.getSelection(true);
            //
            // After getting base64 we need
            // insertEmbed method to paste
            // our data as image.
            //
            // TIP: for those who was searching
            // the way to upload images instead of
            // inserting base64 - here at this point
            // you can achive this by your own logic
            // and pasting resulting link instead of
            // base64 (e.target.result)
            quill.insertEmbed(range.index, 'image', e.target.result);
            //
            // After pasting image, put cursor
            // straight after insertion with
            // range.index + 1
            quill.setSelection(range.index + 1, 'image', Quill.sources.SILENT);
            fileInput.value = "";
          };
          reader.readAsDataURL(fileInput.files[i]);
        }
      }
    });
    this.container.appendChild(fileInput);
  }
  fileInput.click();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<div id="quill"></div>