upload images to the server and render it using image url

[faresayyad]

Hello What if i can upload every image, when i press on the image button of the editor so, but i want to store the image to server and return image url [so that i get rid of store the image using base64], and then render the image based on the returned image.

[nishadmenezes]

This is possible by creating your own ImageHandler. Use this for reference - Adding Custom Handlers

In Angular 4, Edit the onEditorCreated function -

onEditorCreated(quill) {
    var toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', this.imageHandler);
    this.quill = quill;
}

imageHandler(value) {
    /* Image Handler Code...
        Ex. Trigger a file dialog, save to file input in a form, save multipart form data to the
              server & finally retrieve the image url. */
        let range = this.quill.getSelection(true);
        let index = range.index + range.length;
        this.quill.insertEmbed(range.index, 'image', imgUrl);
}

[faresayyad]

@nishadmenezes thank you man

[deepakpapola]

@nishadmenezes @faresayyad can you explain bit more? still i cant upload image to server and the url provided by you is not valid

[nishadmenezes]

* Just copy and paste the URL into the address bar of your browser I don't know what's wrong

What I have done is create a custom image handler that opens up a file dialog on clicking the image upload icon. Then, after saving the uploaded image, I am embedding an image into the quill-editor with the URL of the image I just uploaded.

According to docs, I am adding this custom image handler function to the toolbar of the quill editor so that it is called when the image icon is clicked.

[deepakpapola]

@nishadmenezes can you tell how to open file dialog on image icon click

thanks

[faresayyad]

@deepakpapola this is my implementation:

  EditorCreated(quill) {
    const toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', this.imageHandler.bind(this));
    this.editor = quill;

}

imageHandler() {
  const Imageinput = document.createElement('input');
  Imageinput.setAttribute('type', 'file');
  Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
  Imageinput.classList.add('ql-image');

  Imageinput.addEventListener('change', () =>  {
    const file = Imageinput.files[0];
    if (Imageinput.files != null && Imageinput.files[0] != null) {
        this._service.sendFileToServer(file).subscribe(res => {
        this._returnedURL = res;
        this.pushImageToEditor();
        });
    }
});

  Imageinput.click();
}

pushImageToEditor() {
  const range = this.editor.getSelection(true);
  const index = range.index + range.length;
  this.editor.insertEmbed(range.index, 'image', this._returnedURL);
}

[deepakpapola]

@faresayyad thanx men. did you use the image resize module also?

[nishadmenezes]

Image resize module wasn't packaged as well as this module. I had problems getting it to work. Let me know if you manage that...

[faresayyad]

@deepakpapola your'e welcome man, not yet because i'm dealing with backend right now, but i will try to configure it ASAP. If you can use the image resize, please don't forget to share it hear.

[deepakpapola]

@faresayyad @nishadmenezes sure bros :+1:

[lakinmohapatra]

const index = range.index + range.length; this.editor.insertEmbed(range.index, 'image', this._returnedURL);

Above code is not working for getting current cursor location. My image is always inserted at top. Please help.

[sujeetSharna]

image uploading is working properly

[madhavan-sundararaj]

Hey @faresayyad is ql-image your custom class?

[m7ammad7assan]

@deepakpapola this is my implementation:

  EditorCreated(quill) {
    const toolbar = quill.getModule('toolbar');
    toolbar.addHandler('image', this.imageHandler.bind(this));
    this.editor = quill;

}

imageHandler() {
  const Imageinput = document.createElement('input');
  Imageinput.setAttribute('type', 'file');
  Imageinput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
  Imageinput.classList.add('ql-image');

  Imageinput.addEventListener('change', () =>  {
    const file = Imageinput.files[0];
    if (Imageinput.files != null && Imageinput.files[0] != null) {
        this._service.sendFileToServer(file).subscribe(res => {
        this._returnedURL = res;
        this.pushImageToEditor();
        });
    }
});

  Imageinput.click();
}

pushImageToEditor() {
  const range = this.editor.getSelection(true);
  const index = range.index + range.length;
  this.editor.insertEmbed(range.index, 'image', this._returnedURL);
}

it is not working for me the server cannot recognize the post as image !