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

user_6716267 0
Viewed 704

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,
angular url image
1 Answers

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.

user_150816180
Related