Image Uploading

[Joseph michael]

Hello,
I am trying to save image using saveURL, but i don't understand what parameters and in which format should I return to the front end(text editor) after saving an image in a server, also when i am uploading the image is there a way to specify image "name" before sending it to the server. ?

[Indrajith Srinivasan]

Hi Joseph, 

 

Greetings from Syncfusion support, 

 

We have validated your reported queries and below is the response for it. 

 

Query 1: “I am trying to save image using saveURL, but i don't understand what parameters and in which format should I return to the front end(text editor) after saving an image in a server” 

 

If the saveUrl and the path is configured for the image the image will be uploaded to the server and saved inside RichTextEditor. You can specify the format type of the image as “Blob” or “Base64” using the saveformat property in RichTextEditor. Below is the configuration of saving image file with RichTextEditor. 

 

App.component.html:  

 

 

<ejs-richtexteditor id='defaultRTE' [insertImageSettings]="imageSettings"></ejs-richtexteditor>  

 

 

App.component.ts  

 

    

import { Component, Inject } from '@angular/core';  

import { HttpClient } from '@angular/common/http';  

import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';  

   

@Component({  

selector: 'app-root',  

templateUrl: './app.component.html',  

styleUrls: ['./app.component.scss'],  

providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]  

})  

export class AppComponent {  

public imageSettings: Object;  

   

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {  

 this.imageSettings = {  

  saveUrl: baseUrl + "api/SampleData/SaveFile",  

  path: "../Images/"  

 };  

 }  

}  

   

 

 

Api link: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/imageSettingsModel/#saveformat 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/image/#upload-options 

 

Query 2: “when i am uploading the image is there a way to specify image "name" before sending it to the server.” 

 

Yes, you can specify the image name before sending the request to the server with the imageSelected event. We have also prepared a sample based on your requirement.

 

Api link: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor#imageselected 

Sample: https://stackblitz.com/edit/angular-nvf4zk-9nizm5?file=app.component.ts

Can you please try out the above solution and let us know if you face any difficulties? 

 

Regards, 

Indrajith