how to restrict image insertion to be local only?

[yaaami]

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]

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]

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]

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.  

Refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/123597/ze/sample-1033012820 

Regards, 

Prince 

[Milos]

Hi Prince ,

I still get error, attached image shows error message.

Regards,

Milos

Attachment: Error_cfb129ea.rar

[Prince Oliver]

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]

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]

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.   

  

Refer to the following link for the sample: http://www.syncfusion.com/downloads/support/forum/123597/ze/sample-672854581 

  

Regards,   

Prince   

[Milos]

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]

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:   

http://www.syncfusion.com/downloads/support/forum/123597/ze/sampleApp1047270674   

  

Regards,   

Prince   

[Milos]

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]

Hi Milos,  

Most welcome.  

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

Regards,  

Prince