CODEWITHSUNDEEP
angularimageurl
Tao Feng
Tao Feng

Reputation: 101

ngx-quill-upload with Angular, how to replace the base64-url with a http-url

I use angular12, ngx-quill-upload with quill editor to upload user posts. I am trying to upload images to server, then embed the url to the htmlstring and persist the htmlstring to database. I can successfully upload the image to the server, however, when I persist the htmlstring to database, the htmlstring still contains the base64 string and not the image url. How do I disable base64 string but use URL?

Here is my imageHandler:

imageHandler: {
upload: (file) => {
return new Promise((resolve, reject) => {
if (file.size < 1000000) { // Customize file size as per requirement
console.log("my sas is : " + this.imagesas);
this.blobService.uploadImage(this.imagesas, file, file.name,() => {}).
then(()=>{
resolve("https://example.blob.core.windows.net/post-images/"+file.name)
})
.catch(
()=>{
reject("error")
}
);

let url = "https://example.blob.core.windows.net/post-images/"+file.name;
 console.log(url);
} else {
   reject('Size too large');
    }
    });
  },
  accepts: ['png', 'jpg', 'jpeg', 'jfif', 'apng', 'bmp', 'gif', 'ico', 'cur', 'pjpeg', 'pjp', 'svg', 'tif', 'tiff', 'webp'] // Extensions to allow for images (Optional) | Default - ['jpg', 'jpeg', 'png']
} as Options,

Upvotes: 3

Views: 2493

Answers (2)

Ravi Agheda
Ravi Agheda

Reputation: 184

I've researched a bit on it for my project. I resolved the issue this way.

editor.component.html

<quill-editor (onEditorCreated)="getEditorInstance($event)" [(ngModel)]="content" class="content-editor" [placeholder]="''"> </quill-editor>

editor.component.ts


quillEditorRef: any;
  getEditorInstance(editorInstance: any) {
    this.quillEditorRef = editorInstance;

    console.log(editorInstance);
    
    const toolbar = this.quillEditorRef.getModule('toolbar');
    // toolbar.addHandler('image', this.imageHandler);
    toolbar.addHandler('image', this.uploadImageHandler);
  }


  uploadImageHandler = () => {
    console.log("Root image handler", this.quillEditorRef);
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    input.click();
    input.onchange = async () => {
      const file = input.files?.length ? input.files[0] : null;

      console.log('User trying to uplaod this:', file);

      console.log("this.quillEditorRef", this.quillEditorRef);
      const range = this.quillEditorRef.getSelection();
      // const id = await 
      this.uploadFile(file).subscribe((res : any) => {
        if(res?.status){
          this.quillEditorRef.insertEmbed(range.index, 'image', res?.image_url);
        }
      });
    }

This setup worked for me, it might help others. :)

Upvotes: 3

Coy
Coy

Reputation: 36

It's easier to do if you set it as json not html. This is what I did:

ReplaceBaseWithAddress(jsonstring: string) {
    let data: QuillVM = JSON.parse(jsonstring);

    let baseStrings: string[] = [];

    if (data.ops.length > 1) {
      for (let ctr = 0; ctr < data.ops.length; ctr++) {
        if (data.ops[ctr].insert.image) {
        
          let dataimage = data.ops[ctr].insert.image.split(",");
          data.ops[ctr].insert.image = "BASE 64 replaced image with address location here";
          if (dataimage[1]) {
            
            let image64string:string = dataimage[1];
            baseStrings.push(image64string);
          } 

        }
      }
    }

  }

I hope someone else found a better way.

Upvotes: 2

Related Questions