How to upload image in s3 by using quileditor


#1

I am trying to upload image in s3 by using quilleditor

can you please help


#2

I don’t use vue-quill-editor. I created my own component, but this should be similar. All you need to do is add an image handler to the options of your Quill instance.

My image handler works like this:

// Image upload handler
const imageHandler = () => {
  const input = document.createElement('input');

  input.setAttribute('type', 'file');
  input.setAttribute('accept', 'image/*');
  input.click();

  input.onchange = async () => {
    const file = input.files[0];
    const formData = new FormData();

    formData.append('image', file);

    // Save current cursor state
    const range = this.quill.getSelection(true);

    // Insert temporary loading placeholder image
    this.quill.insertEmbed(range.index, 'image', `${ window.location.origin }/images/loaders/placeholder.gif`); 

    // Move cursor to right side of image (easier to continue typing)
    this.quill.setSelection(range.index + 1);

    // Post to an api endpoint which uploads to s3. It returns the s3 url
    const res = await apiPostNewsImage(formData); 
    
    // Remove placeholder image
    this.quill.deleteText(range.index, 1);

    // Insert uploaded image
    this.quill.insertEmbed(range.index, 'image', res.body.image); 
  }
}

And I simply add it to my Quill instance handlers options:

// Create new instance of Quill
this.quill = new Quill(this.$refs.editor, {
  theme: 'snow',
  modules: {
    toolbar: {
      container: [
        //...
        ['link', 'image', 'video'],
      ],
      handlers: {
        image: imageHandler
      }
    }
  }
});

#4

Hello James,

I’m trying to implement your solution but I don’t really understand how I can initialise this.quill using vue-quill-editor
Actually the block you provided: imageHandler is above all my Vuejs code export default {...

I don’t really know where to put this imageHandler

Thanks for your help :slight_smile:


#5

I haven’t used vue-quill-editor before, but looks like you can set Quill’s options. So, you just need to change a few things, but my code still holds true. You’ll need to hook up an API endpoint that returns the image url for it to fully work, but this should get you most of the way there. https://jsfiddle.net/jamesbrndwgn/23tnmeu5/21/


#6

Thanks a lot now I see!