Welcome Guest Search | Active Topics | Sign In | Register

Editor Custom Image Uploader Options
vu.anh.nguyen
Posted: Wednesday, February 25, 2009 3:04:01 PM
Rank: Member
Groups: Member

Joined: 8/30/2007
Posts: 11
I would like to know if there is a way to use the editor's image upload to pull a file from the client, upload it to the server.

I've got the editor's "InsertOrEditImage" to open up a editordialogcontent dialog box which contains an ajaxuploader control. I would like to browse for an image file on the client, upload to the temp folder on the server and populate the "eo_editor_insertimage_url" input value. I'm able to get the dialog box to open and then browse and upload the file, but I don't know how to get this file's location into the editor. Thanks for the help in advance.
vu.anh.nguyen
Posted: Wednesday, February 25, 2009 7:58:39 PM
Rank: Member
Groups: Member

Joined: 8/30/2007
Posts: 11
Ok, I found a post which is essentially what I want to do.

http://www.essentialobjects.com/forum/postst2115_UploadAndInsertImage-function.aspx

So I guess the only part I'm stuck at is how to use the callbackpanel to get the image path and insert it into the editor using the execCommand?
eo_support
Posted: Wednesday, February 25, 2009 8:27:47 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You can find sample code about how to call execCommand to insert HTML here:

http://doc.essentialobjects.com/library/1/jsdoc.public.editor.execcommand.aspx
http://demo.essentialobjects.com/Default.aspx?path=Editor\_i2\_i1

How to "get the image path" is something totally up to you. You will have the image path on the server side and you will need to figure out a way to transfer that value to the client side. You can use our CallbackPanel or anything else that fits your situation. In fact we consider transferring a value from server side to client side a generic Web programming issue, so we won't be able to offer any details here.

Thanks!
vu.anh.nguyen
Posted: Thursday, February 26, 2009 7:04:24 PM
Rank: Member
Groups: Member

Joined: 8/30/2007
Posts: 11
For anyone interested here's the solution:

Uploader place inside callbackpanel in CustomFooterTemplate of Editor:
<div id="uploaderimg_div" style="display: none">
<eo:CallbackPanel ID="CallBackPanel2" runat="server" Triggers="{ControlID:AJAXUploaderImage;Parameter:Image}"
style="clear:both" ClientSideAfterUpdate="imgAfterUpdate" OnExecute="ImgUploadCallBack">
<eo:AJAXUploader runat="server" ID="AJAXUploaderImage" Width="250px" AutoUpload="true"
TempFileLocation="~/temp_upload" FinalFileLocation="~/temp_upload"
MaxDataSize="30000" MaxFileCount="1" AllowedExtension=".gif|.bmp|.png|.jpg|.jpeg|.tif"
ClientSideOnStart="uploaderimg_start" ClientSideOnDone="uploaderimg_stop" ClientSideOnCancel="uploaderimg_stop"
OnFileUploaded="AJAXUploaderImg_FileUploaded"
AutoPostBack="true">
<LayoutTemplate>
<table cellspacing="0" cellpadding="2" width="492" border="0">
<tr>
<td style="padding-top: 5px">
<eo:ProgressBar ID="ProgressBarImg" runat="server" ControlSkinID="Windows_XP">
</eo:ProgressBar>
</td>
</tr>
<tr>
<td>
<asp:PlaceHolder ID="ProgressTextPlaceHolderImg" runat="server">Progress Text Place Holder
</asp:PlaceHolder>
</td>
</tr>
</table>
</LayoutTemplate>
</eo:AJAXUploader></eo:CallbackPanel>
</div>

Javascript for ClientSideAfterUpdate:
function imgAfterUpdate(sender,data)
{
var oEditor = eo_GetObject('Editor1');
if (sender.getParam()=='Image')
{
oEditor.execCommand('InsertHTML','<img src="' + data + '" />');
}
else
{
oEditor.execCommand('InsertHTML','Error loading image');
}
}

Code-behind for OnExecute:
Protected Sub ImgUploadCallBack(ByVal sender As Object, ByVal e As EO.Web.CallbackEventArgs)
e.Data = String.Empty
If e.Parameter = "Image" Then
Dim Uploader As EO.Web.AJAXUploader = CType(Editor1.FooterContainer.FindControl("AJAXUploaderImage"), EO.Web.AJAXUploader)
e.Data = System.IO.Path.Combine(Uploader.FinalFileLocation, Uploader.PostedFiles(Uploader.PostedFiles.Length - 1).ClientFileName)
e.Data = e.Data.Replace("\\", "/")
e.Data = Uploader.ResolveUrl(e.Data)
End If
End Sub
eo_support
Posted: Friday, February 27, 2009 8:30:11 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Thanks for sharing!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.