Skip to content
This repository was archived by the owner on Mar 11, 2020. It is now read-only.
This repository was archived by the owner on Mar 11, 2020. It is now read-only.

upload images to the server and render it using image url #24

Closed
@faresayyad

Description

@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.

Activity

nishadmenezes

nishadmenezes commented on Sep 18, 2017

@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

faresayyad commented on Sep 22, 2017

@faresayyad
Author

@nishadmenezes thank you man

deepakpapola

deepakpapola commented on Nov 6, 2017

@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

nishadmenezes commented on Nov 6, 2017

@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

deepakpapola commented on Nov 6, 2017

@deepakpapola

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

thanks

faresayyad

faresayyad commented on Nov 6, 2017

@faresayyad
Author

@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

deepakpapola commented on Nov 15, 2017

@deepakpapola

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

nishadmenezes

nishadmenezes commented on Nov 15, 2017

@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

faresayyad commented on Nov 15, 2017

@faresayyad
Author

@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

deepakpapola commented on Nov 15, 2017

@deepakpapola
lakinmohapatra

lakinmohapatra commented on Aug 27, 2018

@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

sujeetSharna commented on Sep 1, 2018

@sujeetSharna

doc004

image uploading is working properly

madhavan-sundararaj

madhavan-sundararaj commented on Feb 2, 2019

@madhavan-sundararaj

Hey @faresayyad is ql-image your custom class?

m7ammad7assan

m7ammad7assan commented on Apr 11, 2019

@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 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @nishadmenezes@lakinmohapatra@faresayyad@m7ammad7assan@deepakpapola

        Issue actions

          upload images to the server and render it using image url · Issue #24 · surmon-china/ngx-quill-editor