Image uploading

[Garry Wu]

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]

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/  

 

UG: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/image/?no-cache=1  

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

Regards, 

Prince 

[Garry Wu]

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]

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]

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]

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:  

http://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_angular1580642395 

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

  

Regards, 

Prince