How to insert images the server instead of Base64 in angular7

Question

I'm currently working with ngx-quill in my angular project. I try to add image with using the editor but editor upload image base64 encoding.

editorText : string
editorForm: FormGroup
editorContent: any
editorStyle = {
    height: '250px'
}
objectFormat = [
    { insert: 'Hello ' },
    { insert: 'World!', attributes: { bold: true } },
    { insert: '\n' }
]
myObjStr:string
config = {
    toolbar: {
        container:
            [
                ['image']
            ]
        }
    }
}


ngOnInit() {
    this.editorForm = new FormGroup({
        'editor': new FormControl(null)
    })

Any suggestion for an imageHandling process to upload image to the server

Chris Moore · Answer 1 · 2020-08-05T21:24:31.910

This won't upload an image for you, but allows the user to paste an image url if it's already hosted (like insert video function):

import { QuillModules, defaultModules } from 'ngx-quill';

export class MyComponent {

    quillModules: QuillModules = {
    toolbar: {
      container: defaultModules.toolbar, 
      handlers: {
        image: imageHandler
      }
    }
  };

}

function imageHandler(this: any) {
  imageHandler(this: any) {
    const tooltip = this.quill.theme.tooltip;
    const originalSave = tooltip.save;
    const originalHide = tooltip.hide;
    tooltip.save = function(this: any) {
      const range = this.quill.getSelection(true);
      const value = this.textbox.value;
      if (value) {
        this.quill.insertEmbed(range.index, 'image', value, 'user');
      }
    };
    // Called on hide and save.
    tooltip.hide = function (this: any) {
       tooltip.save = originalSave;
       tooltip.hide = originalHide;
       tooltip.hide();
    };
    tooltip.edit('image');
    tooltip.textbox.placeholder = "Embed URL";
  }
}

<quill-editor [modules]="quillModules"></quill-editor>

How to insert images the server instead of Base64 in angular7

1 Answers1