OnImageSaving doesn't save changes

[Stefan]

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

[Niko]

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

 

 

[Stefan]

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

[Niko]

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

 

 

[Erik]

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

[Niko]

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