RichFormatText Image, Blob and post.

[Giorgio]

Dear all,

the requirement is to have a rich format text and insert images and then do a post to a  http service that works as mail backend. In the body of the post we send a json with

a field Text in which we put the html extracted from your component. When you insert an image in the component you create a blob reference. The idea is to fetch the data, convert in base64 and insert in the JSON with the following function:

async function retrieve(uri)

{ 

let response = await fetch(uri);

                if (response.ok) {

                let contentType = response.headers.get('Content-Type');

                console.log("Content Header " + contentType)

                console.log("Response data " + JSON.stringify(response.data))

                    if (response.data != null) {

                    let dataBlob = response.blob()

                            return dataBlob

                   }

}

The problem that i see is that the response.data is always empty when fetching your blob.

BR,.

Giorgio

 

[Pandiyaraj Muniyandi]

Hi Giorgio, 

 

Greetings from Syncfusion support.  

  

We have analyzed your query, by default image saved as blob format in RichTextEditor. You can save image in base64 format by configuring saveFormat as “Base64“on “insertimagesettings“ as follows,  

 

Code example:   

 

 

export class Default extends SampleBase {  

 constructor() {  

    this.imageSettings = {  

      saveFormat: "Base64"  

    }  

 }  

 render() {  

    return (  

    <RichTextEditorComponent insertImageSettings={this.imageSettings}>  

        <Inject services={[HtmlEditor, Toolbar, Image, Link, QuickToolbar]}/>  

    </RichTextEditorComponent>  

    )  

 }  

} 

  

 

  

We have prepared sample for your reference, get it from below link  

https://stackblitz.com/edit/react-joumd1-nxt7db?file=index.js 

 

Kindly let us know if the provided information is helpful or not to achieve your requirement.  

  

Regards, 

Pandiyaraj M