We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143877 Apr 8,2019 11:36 AM UTC May 16,2019 04:47 AM UTC Angular - EJ 2 5
loading
Tags: RichTextEditor
Thibault
Asked On April 9, 2019 09:03 AM UTC

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 [Syncfusion]
Replied On April 10, 2019 03:35 AM UTC

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. 


For further reference, please refer the following documentation link 


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

Regards, 
Prince 


Thibault
Replied On April 11, 2019 07:57 AM UTC

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 [Syncfusion]
Replied On April 12, 2019 10:09 AM UTC

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. 

Thanks, 
Prince 


Thibault
Replied On May 12, 2019 05:59 PM UTC

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 [Syncfusion]
Replied On May 16, 2019 04:47 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon