how to embed the url from server and remove base64 string from html string

[elrondfeng]

I use ngx-quill-upload will quill editor to upload user posts. 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. 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,

[ayush013]

Hard to debug it looking at the above snippet. Can you share a Plunker/Codesandbox link.

Also try logging the response from your method in the then callback this.blobService.uploadImage(this.imagesas, file, file.name,() => {}).

[elrondfeng]

thanks for the quick response. I don't have Plunker/codesandbox. also the response from the blobservice is undefined. however, I know the URL of the image, so in the resolve, I can provide the URL there. is that the correct way to use ngx-quill-upload?

from the debugging, I noticed that embedFile(file, handlerId) us called, but the url is null, then the insertBase64Data is called.

do you have an real world example of showing the imageHandler part ? I think that help me greatly to debug.

thanks a lot for your help !

[elrondfeng]

imageHandler: {
  upload: (file) => {
    // @ts-ignore
    return new Promise((resolve, reject) => {

      if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg') { // File types supported for image
        if (file.size < 1000000) { // Customize file size as per requirement

          console.log("my sas is : " + this.imagesas);
          return this.blobService.uploadImage(this.imagesas, file, file.name, () => {}).toPromise()
            .then(url => {
              console.log("url is : " + url);
              resolve(url); // RETURN IMAGE URL from response
            })
            .catch(error => {
              reject('Upload failed');
              // Handle error control
              console.error('Error:', error);
            });
        } else {
          reject('Size too large');
          // Handle Image size large logic
        }
      } else {
        reject('Unsupported type');
        // Handle Unsupported type logic
      }
    });
  },
  accepts: ['png', 'jpg', 'jpeg', 'jfif'] // Extensions to allow for images (Optional) | Default - ['jpg', 'jpeg', 'png']
} as Options,

[elrondfeng]

Hi ayush013, I followed the doc and rewrote the imageHandler, now I can see that the url is the correct one and the upload method returns a right Promise, however, the base64string is still there and the new URL is not in use. Is there a config somewhere that I can tell ngx-quill-upload to use the URL instead of the base64 ?

thanks,

[elrondfeng]

I think I found the reason, but don't have a solution. the el is null, handlerId is seems correct value: QUILL_UPLOAD_HANDLER-0

insertFileToEditor(url, handlerId) {
    const el = document.getElementById(handlerId);
    if (el) {
        el.setAttribute('src', url);
        el.removeAttribute('id');
        el.removeAttribute('class');
    }
}

[elrondfeng]

based on my debugging, the id (QUILL_UPLOAD_HANDLER-0) is never added on the img element

[elrondfeng]

Hi ayush013,

I think I found the reason. Maybe it is a bug. It is in this function:

insertBase64Data(url: string | ArrayBuffer, handlerId: string) { const range = this.range; this.quill.insertEmbed( range.index, this.handler, ${handlerId}${Constants.ID_SPLIT_FLAG}${url} );

const el = document.getElementById(handlerId);

if (el) {
  el.setAttribute('class', Constants.QUILL_UPLOAD_HOLDER_CLASS_NAME);
}

}

the problem is that the handlerId is not added into the img element, so, the el here is null already.

[elrondfeng]

somehow this create function ran twice, the first time, the id is added, but the second time, the handler id is not passed in, so the img element was created without id. class ImageBlot extends BlockEmbed { static create(value)