Automatically upload and insert single image to text content

[Gregor]

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]

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. 

Help documentation link: https://help.syncfusion.com/aspnetmvc/richtexteditor/user-interface#specify-custom-tools  

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

Regards,
Karthikeyan V 

[Gregor]

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]

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]

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]

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