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

Image uploading

Thread ID:

Created:

Updated:

Platform:

Replies:

141463 Dec 12,2018 08:10 PM UTC Jun 7,2019 02:01 AM UTC Angular - EJ 2 5
loading
Tags: RichTextEditor
Garry Wu
Asked On December 12, 2018 08:10 PM UTC

I am trying to upload images using the RichTextEditor and I'm running into issues. I am able to upload a png file from my computer and display it in the ejs-richtexteditor,and if I inspect the element then I see that it is converted to a blob url (as specified in the API).
Uploading to the server is where I run into problems. I have a couple questions:

1. How to listen for Events for file upload:  beforeUpload, uploaded
2. If I select a file, how do I set a guid for file name to save url.





Prince Oliver [Syncfusion]
Replied On December 13, 2018 12:02 PM UTC

Hi Garry, 

Thank you for using Syncfusion products. 

Query 1: How to listen for Events for file upload:  beforeUpload, uploaded. 
 
We have checked your requirement for file upload event in RichTextEditor component. We have not exposed the upload’s event but we can provide actionBegin and actionComplete event for before inserting image and after inserting image. If you need to use the file upload event then, you can invoke the events in sample level. Kindly refer to the following code snippet.  
 
if(rte.imageModule.dialogObj) { 
    rte.imageModule.uploadObj.selected = function(e){ 
      console.log(e.filesData[0]); 
    }; 
    rte.imageModule.uploadObj.success = function(e){ 
      console.log(e); 
    } 
  } 
 
We have attached the sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-xukf1e  
 
Query 2: If I select a file, how do I set a guid for file name to save url. 
 
By default, we have inserted the image using “blob”. If you need to insert image instead of blob URL use “saveUrl” property. The saveUrl represents the URL to action result method to save the image, and the path represents the destination folder in which the image has to be saved. Kindly refer to the following documentation link: https://ej2.syncfusion.com/angular/documentation/api/rich-text-editor/imageSettings/  
 

Please let us know if you need any further assistance on this. 

Regards, 
Prince 


Garry Wu
Replied On December 14, 2018 01:29 AM UTC

Hi,

Thank you for the response.  I setup the saveUrl and I can get the file correctly on server.

On server side, I create an unique filename for each uploaded file, new url is  in data.Location.  

console.log(data.Location);
// Send successful data response to client
res.send(data.Location);

But I don't know how to set it back to RTE.  I also tried set 'path'  in imagesettings, but it always attached the origin filename on local computer.  So, if two computers all upload a file which named  "test.png", they will have same url. I want to have the unique filename back from server and ignore local filename.

I also tried to look at the syncfusion source code, I still don't know how to set.

Thank you,
Garry
success: function (e) {
if (!isNullOrUndefined(_this.parent.insertImageSettings.path)) {
var url = _this.parent.insertImageSettings.path + e.file.name;
var value = { url: url, selection: save };
proxy.uploadUrl = {
url: url, selection: save, altText: altText, selectParent: selectParent,
width: {
width: proxy.parent.insertImageSettings.width, minWidth: proxy.parent.insertImageSettings.minWidth,
maxWidth: proxy.parent.insertImageSettings.maxWidth
},
height: {
height: proxy.parent.insertImageSettings.height, minHeight: proxy.parent.insertImageSettings.minHeight,
maxHeight: proxy.parent.insertImageSettings.maxHeight
}
};
proxy.inputUrl.setAttribute('disabled', 'true');
}
},



Prince Oliver [Syncfusion]
Replied On December 14, 2018 11:50 AM UTC

Hi Garry,  
 
Thank you for your update. 
 
We have checked your requirement to have a unique file name from the server side. In server side, get the “fileName” and make changes to the filename and send it in the response status. Now you can get the modified file name in the client side using statusText. Kindly refer to the following code snippet. 
 
Controller  
[AcceptVerbs("Post")] 
        public void Save() 
        { 
                if (System.Web.HttpContext.Current.Request.Files.AllKeys.Length > 0) 
                { 
                    var httpPostedFile = System.Web.HttpContext.Current.Request.Files["UploadFiles"]; 
                    if (httpPostedFile != null) 
                    { 
                           var fileName = Path.GetFileName(httpPostedFile.FileName); 
                            fileName = "RTE_" + fileName; 
                            var destinationPath = Path.Combine(Server.MapPath("~/Images"), fileName); 
                            httpPostedFile.SaveAs(destinationPath); 
                            Response.StatusDescription = fileName; 
                        }   
                    } 
        } 
 
Client side 
public ontoolbarClick(e, rte: RichTextEditor) { 
    if(rte.imageModule.dialogObj) { 
        let selection: NodeSelection = new NodeSelection(); 
        let range = selection.getRange(rte.contentModule.getDocument()); 
        let save: NodeSelection = selection.save(range, rte.contentModule.getDocument()); 
        let selectParent: Node[] = selection.getParentNodeCollection(range); 
        rte.imageModule.uploadObj.success = function(e: any){ 
        var url = rte.insertImageSettings.path + e.e.currentTarget.statusText; 
                        var altText = e.e.currentTarget.statusText; 
                        (rte.imageModule as any).uploadUrl  = { url: url, selection: save, altText: altText, selectParent: selectParent}; 
        } 
    } 
} 
 
Please check the above solution in your end. If the above solution does not meet your requirement, kindly provide additional information on your requirement. It will help us provide solution.  
 
Regards, 
Prince 


Sathya
Replied On June 4, 2019 01:11 PM UTC

Hi,

I tried the solution provided to set Guid as the filename. Image is getting saved fine but the rte.imageModule.uploadObj.success function is called right after the image is browsed and not after clicking insert button. Could you please provide a solution for this?

Thanks,
Sathya

Prince Oliver [Syncfusion]
Replied On June 7, 2019 02:01 AM UTC

Hi Sathya, 
  
Thanks for contacting us. 
  
We were able to replicate the reported problem. This problem may be due to the uploader's client side success event overriding the source level success event. To fix this issue, the source level uploader success event can be triggered manually below. 

[app.component.ts] 
public ontoolbarClick(e, rte: RichTextEditor) { // Triggered when toolbar icon clicked 
  if (rte.imageModule.dialogObj) { 
    var successEvent = rte.imageModule.uploadObj.success; // Get the source level uploader success event 
    var proxy = rte.imageModule.uploadObj; 
    rte.imageModule.uploadObj.success = function (e: any) { 
      e.file.name = e.e.currentTarget.getResponseHeader('name'); // Get the server side changed image name 
      let filename = <HTMLElement>document.querySelectorAll(".e-file-name")[0]; 
      filename.innerHTML = e.file.name.replace(document.querySelectorAll(".e-file-type")[0].innerHTML, ''); // Change the uploader file name after selected the image 
      filename.title = e.file.name; 
      successEvent.call(proxy, e); // Triggered source level success event 
    }; 
  } 
} 
  
We have attached the sample for your requirement, please find it in the following location:  

Let us know if you need any further assistance on this. 
  
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