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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

how to restrict image insertion to be local only?

Thread ID:

Created:

Updated:

Platform:

Replies:

123597 Apr 1,2016 10:42 PM UTC Mar 10,2017 07:09 AM UTC JavaScript 11
loading
Tags: ejRTE
yaaami
Asked On April 1, 2016 10:42 PM UTC

In this article, it describe ho to "Insert a Image from Your Computer":

http://help.syncfusion.com/js/richtexteditor/image-and-file-browser#insert-a-image-from-your-computer

but it allows user to put a link to any other external site.. how to restrict user to select only images from local server?

Dhinesh Ravi [Syncfusion]
Replied On April 5, 2016 01:15 PM UTC

Hi Yaami,

Thank you for contacting Syncfusion Support.

In RTE, we have used FileBrowser and ImageBrowser controls to insert the files. In the FileBrowser and ImageBrowser, we need to upload the image in the server and insert in the RTE.

In an alternative method, to insert the image from Local machine, we can achieve it by using UploadBox in the Custom tools. Refer to the following online link for custom tools demo.

http://js.syncfusion.com/demos/web/#!/azure/rte/CustomTool

At first, we need to define the custom tools in RTE, so that Uploadbox can be initialized in that custom tool. Refer to the following code example.


[html]

  </div>

    <script type="text/javascript" class="jsScript">

       $(function () {

            $("#rteSample").ejRTE({

                toolsList: ["customTools"],

                width: "100%",

                minWidth: "150px",

                tools: {

                    customTools: [{

                        name: "InsertImage",

                        tooltip: "InsertImage ",

                        css: "InsertImage",

                        text: "InsertImage"

                      

                    }]

                }
            });
});
</script>


After this, we need to initialize the UploadBox control to the custom tools. Refer to the following code example.

[html]

<script type="text/javascript" class="jsScript">

$("#InsertImagee").ejUploadbox({

                saveUrl: "saveFiles.ashx",

                removeUrl: "removeFiles.ashx",

                complete: "success", dialogAction: { content: "body" }
            });

</script>


Since InsertImagee is the id for the custom tools in the RTE.

To upload the image, we need to write saveFiles.ashx handler, so that the file path can  be returned from the handled, and the path is used to insert the image in the RTE. Refer to the following code example.

[html]

<script type="text/javascript" class="jsScript">

//args contains the location of the image.

        function success(args) {

            var image = ej.buildTag("img#image");

            image.attr("src", args.responseText);

            rteObj.executeCommand("inserthtml", image[0].outerHTML);

            uploadObj = $("#InsertImagee").ejUploadbox("instance");

            uploadObj._dialogclose();

        }
    </script>


Where success is the complete event of the UploadBox. In that event, we need to create image tag and append it in the RTE control using inserthtml option in RTE.

We have also created simple sample for the requirement. Refer to the following attachment for the sample.

Sample


Regards,
Dhinesh R

Milos
Replied On February 9, 2017 01:40 PM UTC

Hi Dhinesh,

I checked this example and it does not work for me. I get the error when I try to insert image from my computer.
My error images are in attachment.

Regards,
Milos

Attachment: ErrorImages_51c29575.zip

Prince Oliver [Syncfusion]
Replied On February 10, 2017 12:14 PM UTC

Hi Milo, 

Thanks for contacting Syncfusion support. 

We checked your error message and it is due to missing font icon files from ‘common-images’ folder. We have attached a modified sample in the link below.  


Regards, 
Prince 


Milos
Replied On February 11, 2017 10:39 PM UTC

Hi Prince ,

I still get error, attached image shows error message.

Regards,
Milos

Attachment: Error_cfb129ea.rar

Prince Oliver [Syncfusion]
Replied On February 13, 2017 06:19 AM UTC

Hi Milos,   
  
Thanks for your update.   
  
We were unable to reproduce an issue at our end. From the shared screenshot, we suspect that the SaveFiles.ashx file is not accessible. So please ensure it is in the proper location i.e. in the same folder as the Sample.html file and its accessible.   
  
Regards,   
Prince    


Milos
Replied On February 13, 2017 08:18 AM UTC

Maybe the server I am using is the problem.

I use "mongoose-free-6.1.exe", to host this example.
Is .Net server is obligatory here, for example IIS ?

Regards,
Milos

Prince Oliver [Syncfusion]
Replied On February 14, 2017 11:30 AM UTC

Hi Milos,   
  
Thanks for your update.   
  
We could reproduce the reported issue in the mongoose server. The POST and GET requests for the Save handler in mongoose server return plain text, hence the upload process doesn’t work. We suggest you to host the save handler in a IIS server and use it in the sample or use our online service for Save and Remove handler.  We have attached a modified sample with online service link.   
  
  
Regards,   
Prince   


Milos
Replied On March 1, 2017 12:55 PM UTC

Hi Prince,

I tried to host example on IIS Express.
I created simple web project in VS2015 and copy folder you attached.

When I try to upload image, it seems as everything works fine, no any error in browser console.

But nothing happens, progress bar for upload image works and when it is finished nothing happen, no image in RTE.

regards,
Milos

Prince Oliver [Syncfusion]
Replied On March 2, 2017 08:51 AM UTC

Hi Milos,   
  
Thank you for your update.   
  
We have removed the file save option in our online demo service URL due to security reasons. So the uploaded content will not be saved, therefore there is no image displayed in your RTE. We suggest you to use the local saveFile.ashx file. Kindly have a look at the following code snippet.   
  
$("#InsertImagee").ejUploadbox({   
                saveUrl: "saveFiles.ashx",   
                complete: "success", dialogAction: { content: "body" }   
            });   
  
We have attached a sample application, refer to the following for the sample:   
  
Regards,   
Prince   


Milos
Replied On March 9, 2017 11:07 PM UTC

Hi Prince,

Thanks, your example works now.
Since example is not proper in some situation because we must have "ashx" file beside js files, I will put my solution here, maybe that could help to someone.

We can make simple custom command for image upload with native JavaScript file uploader ( input  type file ):
customTools: [
        { name: "imageUpload", tooltip: "Image upload" }
]

create: function (args) {
    //add image upload button
    var btn = $("#imageUpload");
    $("#imageUpload").find("div").remove();
    var btntarget = $("#inputFileToLoadFake");
    btn.append(btntarget);
}

Then add custom element in html:

<div id="inputFileToLoadFake" class="fileContainer e-rte-toolbar-icon image e-image">
    <input id="inputFileToLoad" type="file" />
</div>

Add css styles to make icon look like syncfusion default image icon:

.fileContainer {
    overflow: hidden;
    position: relative;
}

.fileContainer [type=file] {
    cursor: inherit;
    display: block;
    font-size: 999px;
    filter: alpha(opacity=0);
    min-height: 100%;
    min-width: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}
At the end, I add method in javascript bind to change event of file uploader. Method takes uploaded image,
transfer it in base64 format and append image at the begging of the RTE html.  The only disadvantage here is that image is always adds on the beginning of the RTE,
and user need to move it on the right position, but we do not need "ashx" file and we do not need image to be upload somewhere since it is in base64 format.

encodeImageFileAsURL = function() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
        var fileToLoad = filesSelected[0];

        var fileReader = new FileReader();

        fileReader.onload = function (fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result; // <--- data: base64

            //add base64 image on the beggining of the template
            var rteObj = $("#rteTemplateEditorId").data("ejRTE");
            var htmlContent = rteObj.getHtml();

            var newImage = "<img src='" + srcData + "' >"

            rteObj.setHtml(newImage + htmlContent);
        }

        fileReader.readAsDataURL(fileToLoad);
    }
}
fileUploader = document.getElementById('inputFileToLoad');
fileUploader.addEventListener('change', encodeImageFileAsURL);

Regards,
Milos

Prince Oliver [Syncfusion]
Replied On March 10, 2017 07:09 AM UTC

Hi Milos,  

Most welcome.  

Thanks for sharing your solution. We will consider your suggestion.  

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

;