saveImageOnClient issue

4 posts, 0 answers
  1. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 20 Dec 2012 Link to this post

    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
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 24 Dec 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 27 Dec 2012 Link to this post

    Thank you. Did you logged it in the PITS? Link to track it?

    Martin
  5. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 27 Dec 2012 Link to this post

    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.
Back to Top