Rad Editor dialogs and local filesystem

[Ubaldo]

I'm trying to build something like a "newsletter manager" that allows the user to compose an html formatted message and then send it to mailing lists.
In a real scenario, the user would insert Images and/or other "contents" (something that's not just typed text) selecting it from its local hard drive.
Onche the content file has been selected, and the user has choosen some of its properties (i.e. height/width for an image) I would like to process this file, maybe resize/compact it, then upload to a specific website folder, and then have the url to that file inserted in the editor content.

I hoped that this was what the RadEditor ImageDialog and similar do, but it doesn't seems so.
I'm I wrong ar I'm I missing something ?

What is the preferred tecnique to achieve that goal ?

thx
Ubaldo

[Rumen]

Hi Ubaldo,

Your users could use the upload functionality of the Image Manager to upload images from their local drives to the server. Once the image is uploaded they could resize it and save the resized image to the server using the Image Editor dialog. You can see the following video for more information: http://screencast.com/t/6yAXBMymma7p.

Kind regards,
Rumen
the Telerik team

[Ubaldo]

Hi Rumen, and thanks for this first advice. Now I start to understand the Editor and its dialogs.
I've been rehearsing for a while, and there are some issues about the refreshing of edited images.
Here what I do:

• in Editor, click button to insert image
• in Image Manager, click upload, and select and upload a sample file from my hard drive (OriginalImage.png  400x400)
• now I see it in the Image Manager, and in the properties tab size has been guessed at 400x400
• click button to edit image, and resize it to 200x200, and then rotate 90
• in the Save As textbox I delete the auto-added _thumb suffix, in order to leave the original name, and the "Overwrite if file exist" checkbox is selected
• now click Save
• in the Image Manager the image isn't updated. click on Refresh button, but the image don't update, and so for the properties, that stays at 400x400
• without closing yet the Image Manager, if I view the image saved on the hard drive, it has been resized
• now click insert in the Image Manager, and the image is inserted in the content pane of the Editor with the right resized dimensions

the situation is worse if now I select the already inserted image, click on the Properties button in the lower bar of the Editor, then click on the Image Manager Button in the Properties dialog, then again open the Image Editor, applu another rotation and save overwriting.
In this case the image is not updated neither in the Editor content, and I must generate a postback in order to view the edited version.

I would like to know what are the best practices in order to avoid this problems
thk
Ubaldo

[Rumen]

Hi Ubaldo,

The reported behavior is due to the browser caching mechanism. You can solve the problem by following the steps below:
1) Register the external dialogs of RadEditor:
1.1) Copy the EditorDialogs installation folder to the root of the web application / web site
1.2) Set the ExternalDialogsPath to point to the EditorDialogs folder

<telerik:radeditorrunat="server" ExternalDialogsPath="~/EditorDialogs"ID="RadEditor1">
<ImageManagerViewPaths="~/"UploadPaths="~/"/>
<TemplateManagerViewPaths="~/"UploadPaths="~/"/>
</telerik:radeditor>

2) Open the EditorDialogs\ImageManager.ascx file and add a random query string to the image src, which will tell the browser to refresh the image automatically and to not cache it, e.g.

//NOTE: we cannot use a random src to bypass the IE browser cache in the source code, because it will make browsing images a lot slower 

img.src = src + "?param=" + Math.random();

For your convenience I have attached the modified ImageManager.ascx file.

Best wishes,
Rumen
the Telerik team

[Bob Areddy]

I know this is a year old, but I followed this procedure, and everything seemed to work properly until I clicked on "ImageEditor" and got a null reference exception:

[NullReferenceException: Object reference not set to an instance of an object.]
   Telerik.Web.UI.Editor.DialogControls.ImageEditorDialog.InitializeImageEditor() +22
   Telerik.Web.UI.Editor.DialogControls.ImageEditorDialog.OnInit(EventArgs e) +112
   System.Web.UI.Control.InitRecursive(Control namingContainer) +140
   System.Web.UI.Control.AddedControl(Control control, Int32 index) +197
   System.Web.UI.ControlCollection.Add(Control child) +79
   Telerik.Web.UI.DialogHandlerNoSession.AddDialogControl(Control dialogControl, DialogParameters dialogParameters) +371
   Telerik.Web.UI.DialogHandlerNoSession.LoadDialogControl() +645
   Telerik.Web.UI.DialogHandlerNoSession.CreateChildControls() +320
   System.Web.UI.Adapters.ControlAdapter.CreateChildControls() +15
   System.Web.UI.Control.EnsureChildControls() +154
   Telerik.Web.UI.DialogHandlerNoSession.OnPreLoad(EventArgs e) +18
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2099

[Rumen]

Hello,

This error should be fixed in the latest Q2 2012 build of RadControls for ASP.NET AJAX. If the problem still persists, open a support ticket and send a simple working project that demonstrates it.

You should also ensure that the files placed in the EditorDialogs folder are taken from the same installation as the Telerik.Web.UI.dll. Different versions are not supported.

All the best,
Rumen
the Telerik team