SaveEditableImage

[Eric Krauska]

On the server-side, I would like to save any changes made in the ImageEditor.  How can this be done?  I've messed with SaveEditableImage but am unable to get it to save correctly.  I have a button on the page:

<div class="BadgePopup">
    <telerik:RadUpload runat="server" ID="_upload" FocusOnLoad="True"
        MaxFileInputsCount="1" ControlObjectsVisibility="None" Skin="Forest"
        TargetFolder="~/BadgePhotos" Width="240px"></telerik:RadUpload>
    <telerik:RadButton runat="server" ID="_submit" Text="Upload" onclick="_submit_Click" Skin="Forest"></telerik:RadButton>
    <telerik:RadButton ID="_finished" runat="server" Text="Save" onclick="_photo_Finished" Skin="Forest" /><br /><br />

    <telerik:RadImageEditor ID="_image" runat="server" Skin="Forest" Width="400px" Height="213px"
        AllowedSavingLocation="Server" ToolsFile="~/BadgePhotos/Dialogs.xml" >
    </telerik:RadImageEditor>
</div>

And then the codebehind:

protected void _photo_Finished(object sender, EventArgs e)
{
    using (DAL.KeeleyBarcodeDataContext dal = new DAL.KeeleyBarcodeDataContext())
    {
        DAL.Employee emp = (from n in dal.Employees where n.EmployeeID == new Guid(EmployeeID) select n).First();
        emp.PicturePath = Path.GetFileName(_image.ImageUrl);

        _image.SaveEditableImage(emp.PicturePath, true);
        dal.SaveChanges();
    }
}

If I do a simple resize of the image and click "Save" (my save, not the save on the toolbar), the SaveEditableImage code runs without an exception, yet the image is not saved with the new resized dimensions.  I am implementing this Save method because my users don't like to click on the Save on the toolbar and then yet another Save so I can update the DB.

[Pero]

Hello Eric,

The SaveEditableImage method expects only the file name to be passed, and not the entire path. So if you want to save the image in a custom location you should handle and cancel the ImageSaving server-side event, and then save it in the desired location.
Calling the SaveEditableImage method will trigger the ImageSaving server-side event.

Best wishes,
Pero
the Telerik team

[Manh Gioi]

I still can not save images in other folders. Please help me with an example.. Please !

[Rumen]

Hello Manh,

Here is the requested example:

Default.aspx:

<telerik:RadImageEditor ID="RadImageEditor1" runat="server"
    ImageUrl="~/Images/Vucko.jpg" onimagesaving="RadImageEditor1_ImageSaving">
</telerik:RadImageEditor>

Default.aspx.cs

protected void RadImageEditor1_ImageSaving(object sender, ImageEditorSavingEventArgs args)
{
    args.Image.Image.Save(MapPath("~/Images/SubFolder/Vucko.jpg"));
    args.Cancel = true;
}

The Vucko.jpg image resides in the Images folder placed in the root of the project. After saving the image through the Save dialog of RadImageEditor, the edited image will be saved in the SubFolder folder placed inside the root Images folder.

All the best,
Rumen
the Telerik team

[Manh Gioi]

Thanks Rumen  !

How to change the percentage value of crop photos "AspectRatio" and assign a default value for the image "Width and Height"in the "Crop image" of radimageeditor?

[Rumen]

Hello Manh,

You can see how to customize the Crop dialog in the following forum threads:
http://www.telerik.com/community/forums/aspnet-ajax/image-editor/crop-dialog-using-static-width-height.aspx
and
http://www.telerik.com/community/forums/aspnet-ajax/image-editor/no-save-on-server-aspect-ration-and-more.aspx

All the best,
Rumen
the Telerik team

[Azadeh]

Hi Roman,
can i insert a button in my form that in OnClick Event call a Method for save image to another location?

[Dobromir]

Hi Azadeh,

RadImageEditor does not offer the required functionality out-of-the-box. However, you can achieve the required result using a additional element to pass the destination folder's path to the server and use it in the ImageSaving server-side event.

For your convenience I have attached sample page demonstrating this approach using RadComboBox to select destination folder.


Kind regards,
Dobromir
the Telerik team