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. Image for the cookie policy date

Image uploading

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.





5 Replies

PO Prince Oliver Syncfusion Team December 13, 2018 07:02 AM

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 



GW Garry Wu December 13, 2018 08:29 PM

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');
}
},




PO Prince Oliver Syncfusion Team December 14, 2018 06:50 AM

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 



SA Sathya June 4, 2019 09:11 AM

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


PO Prince Oliver Syncfusion Team June 6, 2019 10:01 PM

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 


Loader.
Live Chat Icon For mobile
Up arrow icon