The Insert button of RichTextEditor Insert Image window don't work anymore

[Thibault]

Hello everyone,

The Insert button of RichTextEditor Insert Image window do nothing when I click on it.
this is my function on my component.ts :

public ontoolbarClick(e, rte: RichTextEditor) {

           var _this=this;

           if(rte.imageModule.dialogObj) {

                rte.imageModule.uploadObj.selected = function(e) {

                     if( e.filesData[0] != null && e.filesData[0] != undefined) {

                         _this.imagesService.addImage( e.filesData[0].rawFile ).subscribe();

                     }

                };

           }

}

and this is my image.service.ts

public addImage(param_file: any): Observable <Object> {

     const data: FormData = new FormData();

     data.append("file", param_file, param_file.name);

     return this.serviceHttp.post(this.apiUrl + "images/upload", data, { responseType:'text'});

}

public apiUrl: string = environment.ApiUrl;

environnement.ts :

export const environment = {

production: false,

ApiUrl: "http://localhost:8081/"

};

the image is good saved in my application folder when I select it from the dialog window. But when I click on Insert in the RichtextEditor window (pink button) it do nothing... the image is not inserted in the richtexteditor... I don't get any error messages from the console.

 I am really new to programming I am on stage after 5 months school so I probably don't understand things which are basic for you.

PS : I'm sorry I didn't know what to select in Control. I use Java + Spring for the back. And i'm on Angular 7

And this is my imageController.java :

@PostMapping(value="images/upload")

public String uploadImage( @RequestParam("file") MultipartFile transferedFile) throws Exception{

try {

File tmp = new File("../FRONT/src/assets/img/").getCanonicalFile();

String destination = tmp.getPath() + "/" + transferedFile.getOriginalFilename();

File data = new File(destination);

transferedFile.transferTo(data);

System.out.println(destination);

Image image = new Image(transferedFile.getOriginalFilename(), destination);

imageRepository.save(image);

return destination;

}catch( Exception param_exception) { 

throw new ResponseStatusException(

HttpStatus.BAD_REQUEST,

"No file found");

}

}

[Prince Oliver]

Hello Thibault, 

Thank you for contacting us. 

We have checked your reported issue. This issue is due to the uploaded event in which you have overridden the source level selected event from your application. Hence the insert button is not working on the Rich Text Editor component. If you wish to save image to database, you can use saveUrl and map the path in insertImageSettings property instead of using an uploaded selected event. The saveUrl represents the URL to an action result method to save the image, and the path represents the destination folder in which the image has to be saved. 

Sample: https://stackblitz.com/edit/angular-xukf1e-aesihr?file=rich-text-editor.component.ts 

API service sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/backend-1932811982 

For further reference, please refer the following documentation link 

API links: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor#insertimagesettings
https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/imageSettings/ 

UG documentation link: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/image/ 

Let us know if you need any further assistance on this. 

Regards, 

Prince 

[Thibault]

Hello,

Thank's for your response. I already tried the solution about path and saveUrl but I couldn't get it to work... So I tryed the solution of creating a new tooltip from zero with the help of this link: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/toolbar/
for have access to all buttons, and delete the older image tooltip. It works, I just need to fix some details like why the window of the new tooltip appear in the center of the page and not at the same place of other tooltip windows...

Audren

[Prince Oliver]

Hello Thibault, 

Good day to you. 

Query 1: “I already tried the solution about path and saveUrl but I couldn't get it to work...” 

We suspect that you might have missed to remove the application level Uploader selected event and use the saveUrl and path property as mentioned in the previous update. 

public ontoolbarClick(e, rte: RichTextEditor) { 

    var _this = this; 

    if (rte.imageModule.dialogObj) { 

        rte.imageModule.uploadObj.selected = function (e) { // Remove this event in your application 

        if (e.filesData[0] != null && e.filesData[0] != undefined) { 

. . . . . . . . . . . . . . . . . . . . . . . . . . . 

        } 

        }; 

    } 

} 

Can you please clarify whether the saveUrl and path property doesn’t work after removing the uploader selected event? If yes, can you please reproduce the issue with previously attached sample. This will help us find the root cause and provide a prompt solution. 

Query 2: “I just need to fix some details like why the window of the new tooltip appear in the center of the page and not at the same place of other tooltip windows...” 

The provided information regarding your requirement is not sufficient to provide an exact solution. We have rendered special characters in a dialog, so it displays in center of page (this achieved from application level). we can show popup at same place near toolbar. 

• Could you please confirm whether you want to show insert image button as custom tool button?
• Could you share more details on this requirement? this will help us understand the requirement clearly in our end.

Please find the below UG documentation for your reference. 

https://ej2.syncfusion.com/angular/documentation/rich-text-editor/toolbar/?no-cache=1#custom-tool 

Thanks, 

Prince 

[Thibault]

Hi,

Sorry for my late response but I worked to something else on my application.

I finally tryed again tu use the saveUrl and path and understand it better.

This is my configuration :

public imageSetting = {

saveUrl:"http://localhost:8081/images/upload",

path: "../FRONT-Alexandra/src/assets/img/"

};

On spring boot Java, I have this message from the terminal when I try to upload an image :

Hibernate: insert into image (name, path) values (?, ?)

2019-05-12 17:26:59.473 WARN 14510 --- [nio-8081-exec-5] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved

[org.springframework.web.multipart.support.

MissingServletRequestPartException: Required request part 'file' is not present]

do you have any solution? My ImageController.java is on my first message. Just my path changed it's actually :

File tmp = new File("../FRONT-Alexandra/src/assets/img/").getCanonicalFile();

Thank's

Audren

[Prince Oliver]

Hello Audren, 

Thanks for your update. 

No. Currently, we don’t have support for using the server-side code in Java. We can use only C# and VB as a server-side code for accessing the data from the client to the server.  

Regards, 

Prince