Load selected image from the Image Gallery into Image Editor

[n/a]

Hi,
the scenario we need is this:
There is a list of images displayed in the gallery view (images are stored on the http file server). After you click on one of the images in the gallery view, we need the image editor to load the selected image for editing, and be able to save it after editing is done.

Do we need to download image first to the local temp folder, or can we load them from the URL? Is there an example?

How can I get image from the selected gallery item loaded into the editor?

Thank you,

[Doncho]

Hi Enrico,

A relatively similar scenario with RadFileExplorer and RadImageEditor is explained in the following article How to Open Image Selected in RadFileExplorer for Editing in RadImageEditor. A similar approach can be implemented for achieving the currently requested behavior with RadImageGallery.

In a few steps, what you can try:

1. Add RadAjaxManageron the page and Ajaxify the RadImageGallery by adding AjaxSetting similar to the one below. This will let the image in RadImageEditor be set and loaded via ajax request. Subscribe to the AjaxRequest event:
   

   <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
       <AjaxSettings>
           <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
               <UpdatedControls>
                   <telerik:AjaxUpdatedControl ControlID="RadImageEditor1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
               </UpdatedControls>
           </telerik:AjaxSetting>
       </AjaxSettings>
   </telerik:RadAjaxManager>

2. Use the client-side OnNavigatin event of the RadImageGallery to get the URL of the clicked image, see Events.
3. Pass the imageUrl as an argument of ajaxRequest, refer to RadAjaxManager Client-Side Public API
   

   <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
       <script>
           function onNavigating(sender, args) {
               //cancel the event if nagvigation should be stopped in the ImageGallery
               args.set_cancel(true);
               //get the imageUrl and pass it to the server via ajaxRequest
               var imageUrl = args.get_item().get_imageUrl();
               setTimeout(function () {
                   var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                   ajaxManager.ajaxRequest(imageUrl); //Invoke AJAX request to load the new image inside ImageEditor
               }, 0);
           }
       </script>
   </telerik:RadScriptBlock>
   
   <telerik:RadImageGallery ID="RadImageGallery1" runat="server" DisplayAreaMode="Thumbnails">
       <ClientSettings>
           <ClientEvents OnNavigating="onNavigating" />
       </ClientSettings>

4. In the OnAjaxRequest event of the RadAjaxManager set the processed URL as ImageUrl of the ImageEditor after resetting its changes.
   

   protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
   {
       RadImageEditor1.ResetChanges();
       RadImageEditor1.ImageUrl = e.Argument;
   }

As for saving the Image, I would suggest you review the information and implementation in our Save Image to a Custom Location live demo.

I hope this will help you achieve the desired behavior.

Please let me know if any further questions come up.

Kind regards,
Doncho
Progress Telerik

[n/a]

Thank you Doncho, this was very helpful.

Just one more thing - I've checked the demo for "Save to custom location", however we have a special scenario where we'd need to use existing file handler for Save.

What would be the best way to send image data via POST HttpRequest? Is there a way to get base64 from the edited image on the client side (in the editor there is no getCurrentImage event that would provide this), and then send it in the request from the client-side?
Or would a better approach be using server-side code, Stream file (or use base64) and send it via HttpRequest?
Are there any examples you could point me to?

Thank you,

[Doncho]

Hi Enrico,

On the client-side, you can use the OnClientSaving event to get the base64 string, cancel the event, and process the string in the desired manner:

function clientSaving(sender, args) {
    var base64string = sender.getBase64();
    //send the base64string to the custom handler;
    args.set_cancel(true);
}

On the server-side,  you can use the OnImageSaving event to get the Image as a stream or byte array and pass it further:

protected void RadImageEditor1_ImageSaving(object sender, ImageEditorSavingEventArgs e)
{
    e.Cancel = true;
    EditableImage editableImage = e.Image;

    using (var stream = new MemoryStream())
    {
        editableImage.Image.Save(stream, ImageFormat.Png);

        byte[] imgData = stream.ToArray();
        //your custom saving logic here
    }
}

I hope this helps.

[n/a]

Thank you Doncho,

the solution you proposed for Gallery->ImageEditor connection would work great if we used uploaded/locally stored images.
However, in our case, gallery view images are kept on a remote fileserver, and loaded to the gallery view via SQL.

Since ImageEditor property imageSource only allows for local file paths, and not remote urls, we cannot fetch the image data the same way we can from the uploaded image.
We thought about "downloading" all the gallery images to a temp folder each time user visits gallery view, but there are scenarios where we will have a lot of images and it seems like a very inefficient solution.

Could you please suggest a better way to override the ImageEditor limitations, and load the image clicked from the gallery view into editor (and to be saved back to the remote fileserver again after editing)?

Thank you

[Doncho]

Hi Enrico, 

One option to consider is loading the image from a stream on the server. Such an approach is demonstrated in our Save Image to a Custom Location live (refer to the code in the RadImgEdt_ImageLoading event handler).

Another possible approach is to implement a custom content provider. In the following demo the images are fetched from a database:

• Using Custom Content Provider