Skip to content

Extending default Quill handler for image to upload base64 data. #1400

Closed
@cozzbie

Description

@cozzbie

I am using the lib for a mobile app and I will love to be able to extend the current functionality of the image handler to grab the image data and post it before embedding it to the editor and I was wondering if this was possible and if I could get some help in implementing this.

  1. hit the image icon
  2. quill handler runs file dialogue
  3. user clicks on file
  4. file datauri is returned by quill but the I convert that to a file and upload and use the returned link instead of base64 obj.

Thanks.

Activity

jwstevens-ii

jwstevens-ii commented on Apr 24, 2017

@jwstevens-ii

Yes! I am also trying to do this exact same thing. We are storing the contents in a SQL database and do not want to store the base64 data of any images.

cozzbie

cozzbie commented on Apr 25, 2017

@cozzbie
Author

You can try something like this to overwrite the default image insert functionality and insert your own instead. @jwstevensii

this.editor = new Quill('#editor', {
      modules: { toolbar: "#toolbar"},
      placeholder: 'you can start here and make it a blast...',
      theme: 'snow'
});
this.editor.getModule("toolbar").addHandler("image", imgHandler);
Matoo125

Matoo125 commented on Jun 16, 2017

@Matoo125

So how does this image uploading works? I just cannot find good example here. Is it possible to add button to toolbar which will open my custom gallery modal where I can select one of my uploaded images or upload new and it will return image url back to editor?

Skura23

Skura23 commented on Jul 17, 2017

@Skura23

I met exactly same problem, don't know how to solve it.

cozzbie

cozzbie commented on Jul 17, 2017

@cozzbie
Author

The imgHandler in the example is a function that gets passed a parameter, you could literally rewrite it as

function(a){
 console.log(a);
 // code that uploads your image and slots the resulting url into the editor goes here...
}

Try running tests to see what gets returned by the quill editor.

Matoo125

Matoo125 commented on Jul 17, 2017

@Matoo125

#863 (comment) This is very nice example, which helped me solved this problem. It is very easy to implement.

Skura23

Skura23 commented on Jul 18, 2017

@Skura23

I finally solved the problem by using Ajax to upload image to server.
Here are some links that I find useful (if you want to using ajax to implement this upload function, too).
How can I upload files asynchronously?
Ajax POST request via jQuery and FormData - $_POST empty on PHP
Suggestions above are useful when you embed the upload function in your quill editor.

TaylorPzreal

TaylorPzreal commented on Jul 27, 2017

@TaylorPzreal

I solved the problem that upload image with url.
This is my code, hope help you:

   const editor = new Quill('#quill-editor', {
      bounds: '#quill-editor',
      modules: {
        toolbar: this.toolbarOptions
      },
      placeholder: 'Free Write...',
      theme: 'snow'
    });

      /**
       * Step1. select local image
       *
       */
    function selectLocalImage() {
      const input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.click();

      // Listen upload local image and save to server
      input.onchange = () => {
        const file = input.files[0];

        // file type is only image.
        if (/^image\//.test(file.type)) {
          saveToServer(file);
        } else {
          console.warn('You could only upload images.');
        }
      };
    }

    /**
     * Step2. save to server
     *
     * @param {File} file
     */
    function saveToServer(file: File) {
      const fd = new FormData();
      fd.append('image', file);

      const xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://localhost:3000/upload/image', true);
      xhr.onload = () => {
        if (xhr.status === 200) {
          // this is callback data: url
          const url = JSON.parse(xhr.responseText).data;
          insertToEditor(url);
        }
      };
      xhr.send(fd);
    }

    /**
     * Step3. insert image url to rich editor.
     *
     * @param {string} url
     */
    function insertToEditor(url: string) {
      // push image url to rich editor.
      const range = editor.getSelection();
      editor.insertEmbed(range.index, 'image', `http://localhost:9000${url}`);
    }

    // quill editor add image handler
    editor.getModule('toolbar').addHandler('image', () => {
      selectLocalImage();
    });

Quill is awesome and easy to extensible.

psuplat

psuplat commented on Aug 14, 2017

@psuplat

@TaylorPzreal - I get the missing ) after formal parameters error on the saveToServer function, which prevent the editor from loading altogether. Any ideas?

papac

papac commented on Sep 24, 2017

@papac

@TaylorPzreal thank you.

larryisthere

larryisthere commented on Dec 5, 2017

@larryisthere

@TaylorPzreal Don't forget to implement by ourselves the ways to manage the images uploaded.

MarcGodard

MarcGodard commented on Apr 5, 2018

@MarcGodard

@TaylorPzreal I would add one line:

input.setAttribute('accept', 'image/*')

19 remaining items

Loading
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

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @aminnagpure@larryisthere@cozzbie@jwstevens-ii@sebastianwestberg

        Issue actions

          Extending default Quill handler for image to upload base64 data. · Issue #1400 · slab/quill