|
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.
|
|
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.aspxSo 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?
|
|
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.aspxhttp://demo.essentialobjects.com/Default.aspx?path=Editor\_i2\_i1How 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!
|
|
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
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Thanks for sharing!
|
|