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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Automatically upload and insert single image to text content

Thread ID:

Created:

Updated:

Platform:

Replies:

132966 Oct 1,2017 06:33 PM UTC Oct 9,2017 05:53 AM UTC ASP.NET MVC 5
loading
Tags: RichTextEditor
Gregor
Asked On October 1, 2017 06:33 PM UTC

Hello,
I'm using syncfusion RichTextEditor in ASP.NET MVC project.

In my opinion when I'm trying to insert image to my text I have too much work to do.

Is it possible to automatically ulpoad image and insert url in content without displaying this window?


and even more this:


What I would like to see is just File Browse window, and that's all:


After click "Open" insert 
  • <img id="..." src="../InlineAttachments/logo.png" .....> 
to my content and no more windows and clicking.

It will much improve using comfort.

Thanks for help!

Karthikeyan Viswanathan [Syncfusion]
Replied On October 2, 2017 04:07 PM UTC

Hi Gregor
,
Thanks for contact Syncfusion support and thanks for your suggestion 

We are consider your request in our future improvement. You can do the same functionality using custom tools with help of uploadbox. You can trigger the fileselect action when toolbar click and append the images into RTE. 


MVC samplebrowser link: http://mvc.syncfusion.com/demos/web/rte/customtools

Regards,
Karthikeyan V 


Gregor
Replied On October 4, 2017 06:50 PM UTC

Thanks,

I used an upload box to do this functionality and it works fine:

$("#UploadImage").ejUploadbox({
    saveUrl: "/FileActions/SaveImage",
    autoUpload: true,
    buttonText: { browse: "Add image" },
    multipleFilesSelection: false,
    complete: function (args) {
      console.log(args.files);
      var editor = $("#ReplyContentHtml").data("ejRTE");
      editor.executeCommand("inserthtml", "<img src='../InlineAttachments/" + args.files.name + "' alt='[image]' style='width:400px'>");
    }
  });

But I have problems to add it to custom tools... could you help me?
I know that I can set any javascript function to "Action" property in custom tool but I dont know how to open uploadbox then.

And can I do something to upload file without display this window?


Thanks for help !


Prince Oliver [Syncfusion]
Replied On October 5, 2017 12:12 PM UTC

Hi Gregor, 

Thank you for your update. 

You can add a custom tool to RTE and use the client side PreRender event to render an upload box control and append it to the custom tool, we added in the toolbar. 

@{Html.EJ().RTE("ReplyContentHtml").Width("100%") .Locale("en-US").ContentTemplate(@<p> 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
            </p>).ShowFooter(true).ClientSideEvents(e=>e.PreRender("render")).Tools(tool => tool.Clear(clear).CustomTools(custom => 
                             custom.Name("uploadImage").Tooltip("Insert image without Dialog").Css("e-icon e-image_01").Action("showDialog").Add())).Render();} 

You need to set width and height as “0px“ for the upload box, in order to make the control invisible. Now in the custom tool’s action method, trigger “click” for the upload box control. This will open the file select dialog.  

<script> 
    function showDialog(e) { 
        $("div#SaveImage_Upload").find('input[type=file]').trigger("click"); 
    } 
    function render(args) { 
        var divEle = ej.buildTag("div#SaveImage_Upload", "", "", ""); 
        this._rteToolbar.find("li#uploadImage").parent().append(divEle); 
        divEle.ejUploadbox({ 
            multipleFilesSelection: false, width: "0px", height: "0px", autoUpload: true, showBrowseButton: false, showFileDetails: false, saveUrl: "SaveImage", 
            success: function (args) { 
                console.log(args.files); 
                var editor = $("#ReplyContentHtml").data("ejRTE"); 
                editor.executeCommand("inserthtml", "<img src='../../FileExplorerContent/" + args.files.name + "' alt='[image]' style='width:400px'>"); 
            } 
        }); 
        divEle.addClass("e-browse-hide"); 
    } 
</script> 

Now to perform automatic upload once file is selected, you need to enable autoUpload property. If you do not require the upload progress details, you can disable it by setting showFileDetails as false. 

We have prepared a sample for your reference, please find the sample from the following link: http://www.syncfusion.com/downloads/support/forum/132966/ze/RTECustomUpload2073694849 

Regards, 
Prince 


Gregor
Replied On October 7, 2017 10:35 PM UTC

Thank you very much, that is exactly what I wanted to acheive.

I added line to close the uploadbox after file upload complete, not just hide. This is better for my appliaction.

complete: function (args) {
var editor = $("#ReplyContentHtml").data("ejRTE");
editor.executeCommand("inserthtml", "<img src='../InlineAttachments/" + args.files.name + "' alt='[image]' style='width:400px'>");
$("div#UploadImage").find('button').trigger("click");
}

If there is any better way to do it - will be nice if you suggest me.
Anyway - thanks a lot!


Prince Oliver [Syncfusion]
Replied On October 9, 2017 05:53 AM UTC

Hi Gregor,  

Most welcome. We are glad that your issue is resolved.  
You can also close the dialog of the upload box control, by using close method from the dialog control’s instance. Kindly refer to the following code. 

complete: function (args) { 
    var editor = $("#ReplyContentHtml").data("ejRTE"); 
    editor.executeCommand("inserthtml", "<img src='../InlineAttachments/" + args.files.name + "' alt='[image]' style='width:400px'>"); 
    var uploadObj = $("#UploadImage").data("ejUploadBox") 
    uploadObj.diaObj.close(); // accessing dialog's instance from uploadbox's instance 
} 
  
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.

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

;