Use RadImageEditor as a form element

[Jan]

I'm currently trying to build a form using several input fields and a RadImageEditor. The problem is the only way to save the picture is to call the client-side function "saveImageOnServer". This function though is called asynchronously, so sometimes the picture is hold in my Session, sometimes the button onSave - servermethod is called first and the Session is empty.

 

Is there any possiblity to ensure the image-save function is called first or to get the edited image inside the postback?

[Vessy]

Hi Jan,

All editing applied to the image edited in RadImageEditor used in Canvas mode are stored on the client, so it is no way to get the Edited image on a Postback. In order to ensure that the edited image is successfully sent to the server, I would advice that you disable the AutoPostback functionality of the saving button and move the logic of its server-side click handler to the ImageSaving event (called after the edited image is passed to the server).

A similar approach is demonstrated in the following live demo:
http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customsaving/defaultcs.aspx?show-source=true


Regards,
Vessy
Progress Telerik

[Jan]

[quote][...] I would advice that you disable the AutoPostback functionality of the saving button and move the logic of its server-side click handler to the ImageSaving event (called after the edited image is passed to the server).
[/quote]

I already did this, the problem is still that I need to submit the form values after saving the Image successfully. In the OnImageSaving Method there are no postback values though...

[Jan]

[quote]Jan said:

[quote][...] I would advice that you disable the AutoPostback functionality of the saving button and move the logic of its server-side click handler to the ImageSaving event (called after the edited image is passed to the server).
[/quote]

I already did this, the problem is still that I need to submit the form values after saving the Image successfully. In the OnImageSaving Method there are no postback values though...

[/quote]

 

I managed to misuse the filename parameter for my form values. However, how can I get back a status if my saving was successful to the client?

01.<asp:ImageButton ID="ib_save" ImageUrl="/pics_new/32x32/save.png" runat="server" AutoPostBack="False"
02.                         OnClientClick="buttonclick();" ToolTip="Speichern" Text="Speichern" />
03.
04.
05. function buttonclick(sender, args) {
06.                    $find("<%= rie.ClientID %>")
07.                        .saveImageOnServer(
08.                        $find("<%= rdptErstellung.ClientID %>").get_selectedDate().toISOString() + "-!#"
09.                        + document.getElementById("cbProtokollStatus").checked + "-!#"
10.                        + $find("<%= rddlSchicht.ClientID %>").get_selectedItem().get_value() + "-!#"
11.                        + $find("<%= rddlAfo.ClientID %>").get_selectedItem().get_value() + "-!#"
12.                        + $find("<%= rtbBemerkung.ClientID %>").get_value() + "-!#"
13.                        + $find("<%= rddlAbarbStatus.ClientID %>").get_selectedItem().get_value() + "-!#"
14.                        + $find("<%= rdtpRueck.ClientID %>").get_selectedDate().toISOString() + "-!#"
15.                        , true);
16.}
17.
18.
19. protected void rie_OnImageSaving(object sender, ImageEditorSavingEventArgs e)
20.        {
21.            using (var stream = new MemoryStream())
22.            {
23.                e.Image.Image.Save(stream, ImageFormat.Png);
24.                Session["Bild"] = stream.ToArray();
25.                SaveProtokoll(e.FileName);
26.            }
27.        }

[Vessy]

Hi Jan,

The ImageEditor updates itself on a Callback thus it is not possible to update other controls on the page (or perform a full Postback) while the edited image is being saved.

A possible approach you can consider is attaching a handler to the client-side Saved event of the control, that is called just after the image has been successfully saved and perform a postback manually in it. You can either call the __doPostback() function are click() of a hidden button, assigning the needed server-side logic to its server-side click handler.

For example you can have a similar implementation:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/image.png" OnClientSaved="onImageSaved" OnImageSaving="RadImgEdt_ImageSaving" Skin="Default">
</telerik:RadImageEditor>
<div style="display:none">
    <telerik:RadButton ID="hiddenButton" runat="server" OnClick="hiddenButton_Click"></telerik:RadButton>
</div>
<script>
    function onImageSaved(imageEditor, args) {
        $find("hiddenButton").click();
        //or
        //__doPostBack();
    }
</script>

protected void RadImgEdt_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
{
    //Save the image to a custom location
    args.Cancel = true;
}

protected void hiddenButton_Click(object sender, EventArgs e)
{
    //the desired post-image-saving logic here
    Response.Write("Server-side logic after the image is successfully saved");
}

Regards,
Vessy
Progress Telerik

[Jan]

That might work, but what about a custom button to Save, then the "ClientImageSaved" Method is never called...

[Vessy]

Hi Jan,

Can you verify that you have disabled the AutoPostback of the custom save button? The triggering of the ClientSaved event should be the same both when using the the Save tool, or a custom button:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ImageUrl="~/image.png" OnClientSaved="onImageSaved" OnImageSaving="RadImgEdt_ImageSaving" Skin="Default">
</telerik:RadImageEditor>
<telerik:RadButton ID="CustomSaveBtn" runat="server" Text="Save" AutoPostBack="false" OnClientClicked="saveImage"></telerik:RadButton>
<div style="display:none">
    <telerik:RadButton ID="hiddenButton" runat="server" OnClick="hiddenButton_Click"></telerik:RadButton>
</div>
<script>
    function saveImage() {
        $find("RadImageEditor1").saveImageOnServer("", true);
    }
    function onImageSaved(imageEditor, args) {
        alert("saved");
        $find("hiddenButton").click();
        //or
        //__doPostBack();
    }
</script>

protected void RadImgEdt_ImageSaving(object sender, Telerik.Web.UI.ImageEditorSavingEventArgs args)
{
    //Save the image to a custom location
    args.Cancel = true;
}

protected void hiddenButton_Click(object sender, EventArgs e)
{
    //the desired post-image-saving logic here
    Response.Write("Server-side logic after the image is successfully saved");
}

Regards,
Vessy
Progress Telerik

[Jan]

Works perfectly, thanks!!

[Vessy]

Hi,

You are welcome, Jan - I am happy to know the proposed solution is working for you.

Regards,
Vessy
Progress Telerik