Rich text table - inserting Image upload to server

[Arul Lakshmanan]

Hi,
I am using ReactJS (using Javascript)

Am trying to insert a image inside table, How to upload the inserted image to server?
And then after uploading success, how to update image url inside table?
Can you kindly help us

[Indrajith Srinivasan]

Hi Arul, 

 

Greetings from Syncfusion support, 

 

We have validated your reported queries, 

 

Query 1: “Am trying to insert a image inside table, How to upload the inserted image to server?” 

 

You can upload the inserted image to the server, by configuring the saveUrl and path property in the insertImageSettings in the Rich Text Editor. Refer the below documentation for reference. 

 

 

constructor() { 

        super(...arguments); 

        this.insertImageSettings = { 

            saveUrl: 'Your image save service’, 

            path: ‘Image saved path’ 

        }; 

    } 

 

render() { 

 

<RichTextEditorComponent  insertImageSettings={this.insertImageSettings}> 

 

</RichTextEditorComponent> 

 

} 

 

 

Image configurations: https://ej2.syncfusion.com/react/documentation/rich-text-editor/image/#image   

 

Save server action: https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/image/#server-side-action 

 

Query 2: “And then after uploading success, how to update image url inside table?” 

 

We are not clear with this requirement, can you share us the following details ? 

 

• Do you want to insert the image src inside the table ?
• Do you want to change the image save path ?

 

The above details will be helpful for us to further validate on the reported issue. 

 

Regards, 

Indrajith 

[Arul Lakshmanan]

Hi Team,

consider am using a service to upload a image to S3, that service will return a s3 storage path.
How that s3 storage path will get insert inside table img src?

[Revanth Krishnan]

Hi Arul, 

 

Greetings from Syncfusion support. 

 

We are currently validating your query from our end, we will update you with further details on or before 21^st December. We appreciate your patience till then. 

 

Regards, 

Revanth 

[Indrajith Srinivasan]

The stored image path in the S3, can be added to the response headers and by using the imageUploadSuccess event in the Rich Text Editor. You can change the image name to update the URL of the image with the stored image location. Check the below documentation for reference. 

 

Documentation: https://ej2.syncfusion.com/react/documentation/rich-text-editor/how-to/rename-images-in-server/