Image Editor inside of FileExplorer

[Atanas Simeonov]

Hello,
I'm trying to put Image Editor in File Explorer and I have some progress, but there is still a bugs. This code open image editor instead of default image preview.

In aspx page:

<table cellspacing="4">
    <tr>
      <td rowspan="2" style="vertical-align: top;">
        Browse to an image and click to preview.
        <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="500px" Height="300px"
          OnClientItemSelected="OnClientItemSelected" EnableOpenFile="true" OnClientFileOpen="LoadImageEditor" >
          <Configuration ViewPaths="~/images" UploadPaths="~/images"
            DeletePaths="~/images" MaxUploadFileSize="5242880" />
        </telerik:RadFileExplorer>
      </td>
      <td>
        <fieldset style="width: 270px; height: 270px">
          <telerik:dialogopener runat="server" id="DialogOpener1"></telerik:dialogopener>
          <legend>Preview</legend>
          <img id="pvwImage" src="" alt="" style="display: none; margin: 10px; width: 250px;
            height: 225px;" />
        </fieldset>
      </td>
    </tr>
  </table>

function OnClientItemSelected(sender, args)
        {
            var pvwImage = $get("pvwImage");
            var imageSrc = args.get_item().get_url();

            if (imageSrc.match(/\.(gif|jpg)$/gi))
            {
                pvwImage.src = imageSrc;
                pvwImage.style.display = "";
            }
            else
            {
                pvwImage.src = imageSrc;
                pvwImage.style.display = "none";
            }
        }
        function LoadImageEditor(sender, e)
          {
            var pvwImage = $get("pvwImage");
            if (!pvwImage.src.match(/\.(gif|jpg)$/gi)) return;
            var args = {};
            args.imageSrc = e.get_item().get_path();
            $find('<%= DialogOpener1.ClientID %>').open('ImageEditor', args);
            e.set_cancel(true);
          }
        function ImageEditor_Callback(sender, args)
        {
          if(typeof(args) == "undefined") return;
          $find('<%= FileExplorer1.ClientID %>').refresh();
        }

Code behind:

ImageManagerDialogParameters imageEditorParameters = new ImageManagerDialogParameters();
        imageEditorParameters.ViewPaths = new string[] { "~/images" };
        imageEditorParameters.UploadPaths = new string[] { "~/images" };
        imageEditorParameters.DeletePaths = new string[] { "~/images" };
        imageEditorParameters.MaxUploadFileSize = 5000000;

        DialogDefinition imageEditor = new DialogDefinition(typeof(ImageEditorDialog), imageEditorParameters);
        imageEditor.Width = Unit.Pixel(832);
        imageEditor.Height = Unit.Pixel(520);
        imageEditor.ClientCallbackFunction = "ImageEditor_Callback";
        DialogOpener1.DialogDefinitions.Add("ImageEditor", imageEditor);

I hope this article to be helpful.

Best wishes,
A. Simeonov

[Fiko]

Hello Atanas,

Thank you for your contribution to the community. Once you are ready, I would suggest to post your solution in the code library section the RadFileExplorer control so other users could benefit from it. We will gladly award you for your work with Telerik points.

Best wishes,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jack]

Hi there - I am looking to do the same - put the Rad image editor inside / linking to the rad file explorer. Is this functionality possible? Are there any instructions on how to do this?

[Vessy]

Hello Jack,

Implementing a custom content provider in RadImageEditor will allow you to integrate the control with the content of RadFileExplorer. You can find a live implementation of such scenario in the following online demo: http://demos.telerik.com/aspnet-ajax/imageeditor/examples/customcontentprovider/defaultcs.aspx

Regards,
Vessy
Telerik