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
close icon

Automatically upload and insert single image to text content

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!

5 Replies

KV Karthikeyan Viswanathan Syncfusion Team 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 



GR Gregor 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 !



PO Prince Oliver Syncfusion Team 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 



GR Gregor 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!



PO Prince Oliver Syncfusion Team 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 


Loader.
Live Chat Icon For mobile
Up arrow icon