OnImageSaving doesn't save changes

6 posts, 0 answers
  1. Stefan
    Stefan avatar
    4 posts
    Member since:
    Dec 2013

    Posted 04 Aug 2014 Link to this post

    Hi,

    Can you please help with following issue:
    I'm using RadImageEditor to edit images from simple image gallery. But, when made any changes (crop, brush, or any other action) on Image Saving, those changes were not saved.

    Rad Image Editor is defined as :

    <telerik:RadImageEditor ID="rieImageEditor" runat="server" Width="760px" Height="560px" OnImageSaving="rieImageEditor_SaveImage" AllowedSavingLocation="Server" OnClientCommandExecuting="OnClientCommandExecuting">
    </telerik:RadImageEditor>

    it's defined inside RadWindow which is inside RadAjaxPanel.

    OnClientCommandExecuting is created to avoid "Save" dialog, because it's only need to save changed content back to DB (not to change image name nor to select destination)
    In "OnImageSaving" I'm taking image data :

    EditableImage img = e.Image;
    MemoryStream imgstream = new MemoryStream();
    img.Image.Save(imgstream, img.RawFormat);

    Memory stream is the data which I save back in DB.

    This is my scenario:

    1. Image content is load from database to the editor and it's displayed correctly
    2. Do some actions on the image (crop, draw...)
    3. Click "Save" button in RadImageEditor
    4. On Close on RadWindow which contains RadImageEditor there is postback just to refresh image gallery

    there are some cases when OnImageSave event is not even launched. But, even if it's launched, it does not save the changes.

    Also for all actions there is information in status bar of the editor what's done (as "Last Action"), but there is no feedback after saving - user is no aware if image is saved correctly or not.

    First, can you please help me, how to save changes made in the editor.
    Second, can you please tell me how to return feedback to the user if there were some errors during saving or not.

    Thanks in advance,
    Regards,
    Stefan
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 07 Aug 2014 Link to this post

    Hi Stefan,

    The setup that you have provided does not seem to expose any apparent problems. Still as you experience issues it would very helpful if you could provide a small sample runnable project with the setup that you have so that we can test the scenario on our side in details. The easiest approach is to open a support ticket and attach the project there.

    Furthermore you can check the following demo for a sample implementation of the OnImageSaving event handling - http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx. In this demo you can also observe the use of the Argument property of the event handler eventArgs parameter. It is used to send back information to the client-side in the OnClientImageSaved event handler.

    Also if you need to change the Save command so that you don't show the Save dialog, you can override the command with a custom implementation. This way you can call the saveImageOnServer method and thus trigger the server-side OnImageSaving event handler. A code sample of defining a client-side ImageEditor command can be seen in the following demo - http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customservercommands/defaultcs.aspx, although the focus of the demo is on server-side commands.

    Hope this helps.

    Regards,
    Niko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stefan
    Stefan avatar
    4 posts
    Member since:
    Dec 2013

    Posted 11 Aug 2014 in reply to Niko Link to this post

    Hi Niko,

    Thanks for your reply, but it doesn't fix my issue.
    I've followed both demos and still no success. Following first demo (about simple implementation of the OnImageSaving), the only difference from the demo and my code is that my RadImageEditor control is inside RadWindow which is inside RadAjaxPanel (which should only save changed image in the editor) which is inside one "main" RadAjaxPanel which includes another controls.

    Unfortunately I can't separate this part of the code to make stand alone project so you can test it, but I can give you more details about how it's implemented:

    Since it's mention in the following code, in the head section there is client code function:
    function ReloadOnClientClose(sender, eventArgs){
             window.location.href=window.location.href;
         }

    following is the design side:
    <telerik:RadAjaxLoadingPanel ID="MainLoadingPanel" runat="server" BackgroundTransparency="0">
                        <div class="loading">
                            <asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader-win.gif" AlternateText="loading">
                            </asp:Image>
                        </div>
                    </telerik:RadAjaxLoadingPanel>
                    <telerik:RadAjaxPanel runat="server" ID="MainUpdatePanel" LoadingPanelID="MainLoadingPanel">
                        <telerik:RadAjaxLoadingPanel ID="ralpUploadImage" runat="server"></telerik:RadAjaxLoadingPanel>
                        <telerik:RadAjaxPanel runat="server" ID="rapUploadFiles" LoadingPanelID="ralpUploadImage">
                            <telerik:RadWindow ID="winImageEditor" runat="server" ShowContentDuringLoad="false" Modal="false" Behaviors="Close,Move,Resize" Title="Edit Image" Width="800px" Height="650px" OnClientClose="ReloadOnClientClose">
                            <ContentTemplate>
                                <telerik:RadImageEditor ID="rieImageEditor" runat="server" Width="760px" Height="560px" OnImageSaving="rieImageEditor_SaveImage" AllowedSavingLocation="Server" OnClientCommandExecuting="OnClientCommandExecuting">
                                </telerik:RadImageEditor>
                            </ContentTemplate>
                            </telerik:RadWindow>
                            <telerik:RadCodeBlock ID="codeblock1" runat="server">
                            <script type="text/javascript">
                                function OnClientCommandExecuting(imEditor, eventArgs) {
                                    if (eventArgs.get_commandName() == 'Save') {
                                        imEditor.saveImageOnServer('', true);

                                        //Prevent the buil-in Save dialog to pop up
                                        imEditor.setToggleState('Save', false);
                                        imEditor.saveImageOnServer('', true);
                                        eventArgs.set_cancel(true);
                                    }
                                }
                            </script>
                        </telerik:RadCodeBlock>
                        </telerik:RadAjaxPanel>
                      --here are some other asp.net controls--
       </telerik:RadAjaxPanel>
    code behind:
    protected void rieImageEditor_SaveImage(object sender, ImageEditorSavingEventArgs e)
    {
                    EditableImage img = e.Image;
                    MemoryStream imgstream = new MemoryStream();
                    img.Image.Save(imgstream, img.RawFormat);
                    ....code that follows just uses imgstream to store editor content
    }

    Again, the problem is that the OnImageSaving event is not even lauched...

    I've not try to override the command with a custom implementation. In mean time can you please check previous design while I'm trying with custom implementation...

    Thanks in advance
    Regards,
    Stefan
  5. Niko
    Admin
    Niko avatar
    387 posts

    Posted 14 Aug 2014 Link to this post

    Hi Stefan,

    I ran several tests on my side and did some debugging of the provided code samples, but still I wasn't able to find anything out of the ordinary. The server-side ImageSaving event gets hit when the window closes. The only difference that I did was to use the OnClientBeforeClose client-side event of the RadWindow control.

    Please, check the following video with one of my debug sessions - http://screencast.com/t/k8MnOhLPP. Also you can find attached a the page sample that I was using.

    Hope this helps.

    Regards,
    Niko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Erik
    Erik avatar
    1 posts
    Member since:
    Aug 2016

    Posted 31 Aug Link to this post

    Ok - Telerik - i have read every server side post about this and i am still having issues.  Here is the problem

    1). I cannot save the modified changes to an image with server side code.

     

    Here is the .aspx file - this is within an ASP updatepanel with UpdateMode="Conditional" - as that was a problem too

    <telerik:RadImageEditor ID="RadImageEditor1" RenderMode="Lightweight" StatusBarMode="Hidden" ImageUrl="~/images/white.png" EnableResize="true" runat="server" Width="90%" Height="175px"
    OnImageSaving="RadImageEditor1_ImageSaving" OnClientCommandExecuting="imageEditorCommandExecuting">
    <Tools>
    <telerik:ImageEditorToolGroup>
    <telerik:ImageEditorTool Text="Save" CommandName="Save" />
    <telerik:ImageEditorTool CommandName="Undo" />
    <telerik:ImageEditorTool Text="Pencil" CommandName="Pencil" IsToggleButton="true" />
    </telerik:ImageEditorToolGroup>
    </Tools>
    <EditableImageSettings MaxJsonLength="999999999" />
    </telerik:RadImageEditor>

     

    Ok now the code behind ....

    Dim sigblock As RadImageEditor = CType(editForm.FindControl("RadImageEditor1"), RadImageEditor)
     sigblock.SaveEditableImage("~/test.png", True)
        
        Protected Sub RadImageEditor1_ImageSaving(sender As Object, e As Telerik.Web.UI.ImageEditorSavingEventArgs)
            
            Dim img As Telerik.Web.UI.ImageEditor.EditableImage = e.Image
    'img.

    img.Image.Save(MapPath("~/sigfile.png"))
    e.Cancel = True
                    
        End Sub

    I have tried every combination - it does save the file - but is is always the original image file - i have a white.png file that i want people to be able to use a pencil on - and all i get is the white original.png file.  Not any of the pencil drawing

     

    Please hlep

  7. Niko
    Admin
    Niko avatar
    387 posts

    Posted 02 Sep Link to this post

    Hello Erik,

    If what has already been discussed in this forum thread does not help in your case, I would advise you to create a sample runnable project with the setup that is problematic on your side. Then open a support ticket and attach the sample there so that we can investigate the concrete cause of this problem.

    Regards,
    Niko
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017