This is a migrated thread and some comments may be shown as answers.

saveImageOnClient issue

3 Answers 32 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Martin Roussel
Top achievements
Rank 1
Martin Roussel asked on 20 Dec 2012, 06:06 PM
Hi, Ive noticed that my RadImageEditor stopped working when saving images. It was the first time I tried it after upgrading to Q3 2012 and im almost sure it was working as expected before. I use a custom button on the toolbar in order to save the images on client side. When I click the button, the query strings that were passed from the calling page seem to be overwritten by the control. In fact, when page first loads (Page_Load), my strings are this:

Request.QueryString["myFileLocation"] = "http://www.rbc.com/community-sustainability/_assets-custom/images/RBC_BWP_Wallpaper_1600X1200_EN.jpg"

Request.QueryString["myFileName"] = ""

When I click the save button, I get this (still in Page_Load):
Request.QueryString["myFileLocation"] = "http://www.rbc.com/community-sustainability/_assets-custom/images/Telerik.Web.UI.WebResource.axd?type=iec"

Request.QueryString["myFileName"] = null

Here is the code to reproduce it. You need to call the page using query strings like this:

http://localhost:PORT/Test3.aspx?myFileLocation=http://www.rbc.com/community-sustainability/_assets-custom/images/RBC_BWP_Wallpaper_1600X1200_EN.jpg&myFileName=

Test3.aspx
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                        <telerik:RadImageEditor ID="RadImageEditor1" runat="server" StatusBarMode="Top" ToolsLoadPanelType="AjaxPanel">
                            <Tools>
                                <telerik:ImageEditorToolGroup>
                                    <telerik:ImageEditorTool CommandName="Print" />
                                    <telerik:ImageEditorTool ImageUrl="~/Images/Icons/Floppy.png" Text="Download" meta:resourcekey="ImageEditorDownload" CommandName="CustomDownload" />
                                </telerik:ImageEditorToolGroup>
                                <telerik:ImageEditorToolGroup>
                                    <telerik:ImageEditorToolStrip CommandName="Undo" />
                                    <telerik:ImageEditorToolStrip CommandName="Redo" />
                                    <telerik:ImageEditorTool CommandName="Reset" />
                                </telerik:ImageEditorToolGroup>
                                <telerik:ImageEditorToolGroup>
                                    <telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="Resize" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="Zoom" />
                                    <telerik:ImageEditorTool CommandName="ZoomIn" />
                                    <telerik:ImageEditorTool CommandName="ZoomOut" />
                                    <telerik:ImageEditorTool CommandName="Opacity" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="Rotate" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="RotateRight" />
                                    <telerik:ImageEditorTool CommandName="RotateLeft" />
                                    <telerik:ImageEditorTool CommandName="Flip" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="FlipVertical" />
                                    <telerik:ImageEditorTool CommandName="FlipHorizontal" />
                                    <telerik:ImageEditorTool CommandName="AddText" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="InsertImage" IsToggleButton="true" />
                                </telerik:ImageEditorToolGroup>
                            </Tools>
                        </telerik:RadImageEditor>
                     
                        <script type="text/javascript">
                            Telerik.Web.UI.ImageEditor.CommandList["CustomDownload"] = function (imageEditor, commandName, args) {
                                imageEditor.saveImageOnClient("Image");
                            }
                         </script>
 
 
                    </telerik:RadAjaxPanel>

Test3.aspx.cs
protected void Page_Load(object sender, System.EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //check Request.QueryString["myFileLocation"] and Request.QueryString["FileName"] here after save click
            }
        }

Also, is it normal that the save is creating a page reload (IsPostBack="false")? Im not sure if the real problem here is this query string "contamination" or if before Q3 2012, the save click was creating a postback instead (IsPostBack=true) ...which is surely changing my logic.

TIA

Martin

3 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 24 Dec 2012, 01:18 PM
Hi Martin,

Thank you for bringing this problem to our attention. I have logged it into our database and we will do our best to have it fixed for one of the upcoming releases.

For the time being, as a workaround you can overwrite EditableImage and EditableCanvas saveOnClient methods like follows:
Telerik.Web.UI.ImageEditor.EditableCanvas.prototype.saveOnClient = function(fileName)
{
    var dkey = fileName ? "&fileName=" + fileName + "&dkey=2" : "&dkey=2";
 
    var location = document.location.protocol + "//" + document.location.host + document.location.pathname;
    location = location.substring(0, location.lastIndexOf("/") + 1) + "Telerik.Web.UI.WebResource.axd?type=iec" + dkey;
 
    this._downloadImg(location);
}
 
Telerik.Web.UI.ImageEditor.EditableImage.prototype.saveOnClient = function(fileName)
{
    var url = this.get_url();
    if(url)
    {
        var dkey = fileName ? "&fileName=" + fileName + "&dkey=" : "&dkey=";
        if(url.indexOf("Telerik.Web.UI.WebResource.axd?type=iec") != -1)
        {
            document.location = url + dkey + "1";
        }
        else
        {
            var location = document.location.protocol + "//" + document.location.host + document.location.pathname;
 
            location = location.substring(0, location.lastIndexOf("/")+1);
            document.location = location + "Telerik.Web.UI.WebResource.axd?type=iec" + dkey + this._imageEditor._downloadKey;
        }
    }
}

As a small toke of gratitude I have updated your Telerik points accordingly.

Regards,
Dobromir
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Martin Roussel
Top achievements
Rank 1
answered on 27 Dec 2012, 12:43 PM
Thank you. Did you logged it in the PITS? Link to track it?

Martin
0
Vessy
Telerik team
answered on 27 Dec 2012, 01:48 PM
Hi Martin,

We have logged this internally but I made it a PITS issue so that you can track its progress here: PITS.

All the best,
Vesi
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
ImageEditor
Asked by
Martin Roussel
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Martin Roussel
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or