|
|
Rank: Newbie
Groups: Member
Joined: 6/17/2010
Posts: 4
|
First of all, thanks very much for producing such a great product that save me a lot of time and effort.
I am refering to the demo: Ajax Uploader --> Upload from toolbar
I understand that you can user the File explorer to upload the image and insert the image into editor.
Just wondering if it is possible to user the "Attachmetns" button to upload and insert the image in editor.
Sample codes will be deeply appreciated.
Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
You can do that but you still want to do it through an "Insert" dialog. So the basic flow will be like this:
1. You click "Insert Image" button from the toolbar, "Insert Image" dialog (this dialog is modified to remove FileExplorer) opens;
2. User clicks "Browse" button in "Insert Image" dialog. The uploader's "Browse File" dialog opens;
3. User browses a local file and and the upload starts;
4. Once the upload finishes, user clicks "OK" to insert that image into the Editor and "Insert Image" dialog closes;
The reason that a dialog is still needed is because that prevents user from changing the cursor position while the file is being uploaded. Changing cursor position when file is being uploaded is not a problem if you just want to "attach" the file because the file is not inserted into the editor. However it can cause serious confusion when you actually want to insert the file into editor.
The difference between this approach and the standard FileExplorer approach is it skips FileExplorer altogether. Thus you lose the ability to browse and insert a file that is already on your server. You have to browse and upload a new file from your client every time.
Please let us know if this makes sense to you and if you still need sample code we can provide one.
Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 6/17/2010
Posts: 4
|
Yes. It makes sense. I try to add an ajax uploader in the "InsertOrEditImage" dialog. Once the file is uploaded, add the file path in "eo_editor_insertimage_url" input box. But everytime ajax uploader does a postback, the dialog disappear.
It would be great if you can provide some sample codes.
Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, That is normal. :) You will need to put the AJAX Uploader inside a CallbackPanel to avoid anything else changes when the uploader posts back. It will be something like this:
Code: HTML/ASPX
<eo:CallbackPanel runat="server" id="CallbackPanel1"
ChildrenAsTriggers="true">
<eo:AJAXUploader AutoPostBack="true" .....>
</eo:AJAXUploader>
.....other contents you wish to update....
</eo:CallbackPanel>
The uploader's AutoPostBack is set to true so that it automatically posts back the page when the upload finishes. However because it is inside a CallbackPanel with ChildrenAsTriggers set to true, it would only update the region inside the CallbackPanel thus it will not close the dialog. You mentioned add the file path in "eo_editor_insertimage_url" input box. This is correct but I am not sure how you do it because this can be a little bit tricky. If you already know how to do it then it's great. If not please let us know and we will try to provide a full working page to you. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 6/17/2010
Posts: 4
|
That was the plan. :) You are right. It is tricky. Could you please provide a full working page?
I am quite happy to let the user to upload and insert one image at a time.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Here is a full working page:
Code: JavaScript
//This function is called after the CallbackPanel
//finishes uploading
function after_update(callback, extraData)
{
//Update the input element
var urlInput = document.getElementsByName("eo_editor_insertimage_url")[0];
urlInput.value = extraData;
//Hide the uploader and displays other elements
document.getElementById("panUpload").style.display = "none";
document.getElementById("panInsert").style.display = "";
}
//This function is called when the dialog is displayed
function init_dialog()
{
//Show the uploader and hide other elements
document.getElementById("panUpload").style.display = "";
document.getElementById("panInsert").style.display = "none";
}
Code: HTML/ASPX
<eo:Editor ID="Editor1" runat="server" Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" Height="320px" HighlightColor="255, 255, 192"
ToolBarSet="Basic" Width="500px">
<FooterStyle CssText="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<BreadcrumbItemStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma" />
<EmoticonStyle CssText="background-color:white;border-bottom-color:#c5d3ed;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#c5d3ed;border-left-style:solid;border-left-width:1px;border-right-color:#c5d3ed;border-right-style:solid;border-right-width:1px;border-top-color:#c5d3ed;border-top-style:solid;border-top-width:1px;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<BreadcrumbItemHoverStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma; background-color:#e0e0e0;" />
<HeaderStyle CssText="border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px" />
<BreadcrumbItemSeparatorStyle CssText="width: 3px; height: 10px" />
<EmoticonDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<BreadcrumbLabelStyle CssText="padding-right: 6px; padding-left: 6px; font-size: 12px; padding-top: 1px; font-family: tahoma" />
<BreadcrumbDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<TabButtonStyles>
<NormalStyle CssText="border-right: #335ea8 1px; padding-right: 7px; border-top: #335ea8 1px; padding-left: 7px; font-size: 12px; padding-bottom: 3px; border-left: #335ea8 1px; padding-top: 3px; border-bottom: #335ea8 1px; font-family: tahoma; background-color: white" />
<HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: #c2cfe5" />
<SelectedStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: white" />
</TabButtonStyles>
<EditAreaStyle CssText="border-right: gray 1px solid; padding-right: 0px; border-top: gray 1px solid; padding-left: 0px; padding-bottom: 0px; border-left: gray 1px solid; padding-top: 0px; border-bottom: gray 1px solid" />
<DialogContents>
<eo:EditorDialogContent CommandName="InsertOrEditImage">
<ContentTemplate>
<!-- uploader wrapped inside a CallbackPanel -->
<eo:CallbackPanel runat="server" ID="CallbackPanel1" ChildrenAsTriggers="true" OnExecute="CallbackPanel_Execute"
ClientSideAfterUpdate="after_update">
<div id="panUpload">
<eo:AJAXUploader runat="server" ID="AJAXUploader1" Width="350px" TempFileLocation="~/eo_upload"
AutoPostBack="true" FinalFileLocation="~/" OnFileUploaded="AJAXUploader1_FileUploaded">
</eo:AJAXUploader>
</div>
</eo:CallbackPanel>
<!-- original dialog contents, initially invisible -->
<div id="panInsert" style="width: 350px; display: none;">
<table cellspacing="3" cellpadding="1" border="0" width="100%">
<tr>
<td width="60px" nowrap="nowrap">
Url:
</td>
<td colspan="3" nowrap="nowrap">
<input type="text" name="eo_editor_insertimage_url" style="width: 250px;" />
</td>
</tr>
<tr>
<td>
Description:
</td>
<td colspan="3">
<input type="text" name="eo_editor_insertimage_desc" style="width: 250px;" />
</td>
</tr>
<tr>
<td>
Width:
</td>
<td>
<input type="text" name="eo_editor_insertimage_width" style="width: 90px;" />
</td>
<td>
Height:
</td>
<td align="right">
<input type="text" name="eo_editor_insertimage_height" style="width: 90px;" />
</td>
</tr>
<tr>
<td align="right" colspan="4">
<input type="button" name="eo_editor_default_button" value="OK" style="width: 80px;"
onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditImage', this, event);" />
<input type="button" value="Close" style="width: 80px;" onclick="eo_GetContainer(this, 'Editor').closeDialog(this, event);" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</eo:EditorDialogContent>
</DialogContents>
</eo:Editor>
Code: C#
//The uploaded file Url
private string m_szFileUrl;
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
//Initializes ClientSideOnInitDialog
EditorDialogContent dc = Editor1.DialogContents["InsertOrEditImage"];
Dialog dlg = dc.Dialog;
dlg.ClientSideOnInitDialog = "init_dialog";
//This is needed to make sure all child
//controls are created
dlg.ContentContainer.FindControl("AJAXUploader1");
}
protected void AJAXUploader1_FileUploaded(object sender, EventArgs e)
{
//Get the uploader control
EO.Web.AJAXUploader uploader = (EO.Web.AJAXUploader)sender;
//Get the Url of the uploaded files
m_szFileUrl = Path.GetFileName(uploader.PostedFiles[0].FinalFileName);
m_szFileUrl = Path.Combine(uploader.FinalFileLocation, m_szFileUrl);
m_szFileUrl = ResolveUrl(m_szFileUrl);
//Clear the uploader's PostedFiles list
uploader.ClearPostedFiles();
}
protected void CallbackPanel_Execute(object sender, EO.Web.CallbackEventArgs e)
{
//Pass the new Url to the client side
e.Data = m_szFileUrl;
}
Point of interests: 1. The dialog contains two sections: the uploader section and the rest. The uploader is the newly added part. The rest contains the "original" elements such as url text box, description text box etc. The "browse with File Explorer" button is removed; 2. The uploader is placed inside a CallbackPanel. This is necessary so that when the uploader posts back it will not raises a full post back. As a result, when user finishes upload, only the dialog is being updated; 3. Once user finishes upload, the Url of the newly uploaded file is passed to the client side event handler after_update by the CallbackPanel control. after_update fills the Url textbox with this new value and also hide the uploader and shows the "original" elements; 4. Additional code is necessary to show the uploader and hide the "original" elements when the dialog is displayed every time. This is done in init_dialog and it is triggered through the dialog's ClientSideOnInitDialog event; Hope this helps. Please feel free to let us know if you have any more questions. Thanks!
|
|
Rank: Newbie
Groups: Member
Joined: 6/17/2010
Posts: 4
|
That's exactly what I want.
Thank you so much for your help.
|
|
Rank: Newbie
Groups: Member
Joined: 3/23/2008
Posts: 1
|
I love it!!...
Thanks, eo_support!!
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi eo_suport, I tried to use the example in VB.NET and is not working. See codes below:
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Editor._Default" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="JavaScript1.2">
//This function is called after the CallbackPanel
//finishes uploading
function after_update(callback, extraData)
{
//Update the input element
var urlInput = document.getElementsByName("eo_editor_insertimage_url")[0];
urlInput.value = extraData;
//Hide the uploader and displays other elements
document.getElementById("panUpload").style.display = "none";
document.getElementById("panInsert").style.display = "";
}
//This function is called when the dialog is displayed
function init_dialog()
{
//Show the uploader and hide other elements
document.getElementById("panUpload").style.display = "";
document.getElementById("panInsert").style.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Editor ID="Editor1" runat="server" Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" Height="320px" HighlightColor="255, 255, 192"
ToolBarSet="Basic" Width="500px">
<FooterStyle CssText="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<BreadcrumbItemStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma" />
<EmoticonStyle CssText="background-color:white;border-bottom-color:#c5d3ed;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#c5d3ed;border-left-style:solid;border-left-width:1px;border-right-color:#c5d3ed;border-right-style:solid;border-right-width:1px;border-top-color:#c5d3ed;border-top-style:solid;border-top-width:1px;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<BreadcrumbItemHoverStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma; background-color:#e0e0e0;" />
<HeaderStyle CssText="border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px" />
<BreadcrumbItemSeparatorStyle CssText="width: 3px; height: 10px" />
<EmoticonDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<BreadcrumbLabelStyle CssText="padding-right: 6px; padding-left: 6px; font-size: 12px; padding-top: 1px; font-family: tahoma" />
<BreadcrumbDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<TabButtonStyles>
<NormalStyle CssText="border-right: #335ea8 1px; padding-right: 7px; border-top: #335ea8 1px; padding-left: 7px; font-size: 12px; padding-bottom: 3px; border-left: #335ea8 1px; padding-top: 3px; border-bottom: #335ea8 1px; font-family: tahoma; background-color: white" />
<HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: #c2cfe5" />
<SelectedStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: white" />
</TabButtonStyles>
<EditAreaStyle CssText="border-right: gray 1px solid; padding-right: 0px; border-top: gray 1px solid; padding-left: 0px; padding-bottom: 0px; border-left: gray 1px solid; padding-top: 0px; border-bottom: gray 1px solid" />
<DialogContents>
<eo:EditorDialogContent CommandName="InsertOrEditImage">
<ContentTemplate>
<!-- uploader wrapped inside a CallbackPanel -->
<eo:CallbackPanel runat="server" ID="CallbackPanel1" ChildrenAsTriggers="true" OnExecute="CallbackPanel_Execute"
ClientSideAfterUpdate="after_update">
<div id="panUpload">
<eo:AJAXUploader runat="server" ID="AJAXUploader1" Width="350px" TempFileLocation="~/eo_upload"
AutoPostBack="true" FinalFileLocation="~/" OnFileUploaded="AJAXUploader1_FileUploaded">
</eo:AJAXUploader>
</div>
</eo:CallbackPanel>
<!-- original dialog contents, initially invisible -->
<div id="panInsert" style="width: 350px; display: none;">
<table cellspacing="3" cellpadding="1" border="0" width="100%">
<tr>
<td width="60px" nowrap="nowrap">
Url:
</td>
<td colspan="3" nowrap="nowrap">
<input type="text" name="eo_editor_insertimage_url" style="width: 250px;" />
</td>
</tr>
<tr>
<td>
Description:
</td>
<td colspan="3">
<input type="text" name="eo_editor_insertimage_desc" style="width: 250px;" />
</td>
</tr>
<tr>
<td>
Width:
</td>
<td>
<input type="text" name="eo_editor_insertimage_width" style="width: 90px;" />
</td>
<td>
Height:
</td>
<td align="right">
<input type="text" name="eo_editor_insertimage_height" style="width: 90px;" />
</td>
</tr>
<tr>
<td align="right" colspan="4">
<input type="button" name="eo_editor_default_button" value="OK" style="width: 80px;"
onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditImage', this, event);" />
<input type="button" value="Close" style="width: 80px;" onclick="eo_GetContainer(this, 'Editor').closeDialog(this, event);" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</eo:EditorDialogContent>
</DialogContents>
</eo:Editor>
</div>
</form>
</body>
</html>
Code: Visual Basic.NET
Imports System.io
Imports EO.web
Partial Public Class _Default
Inherits System.Web.UI.Page
Private m_szFileUrl As String
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack Then Exit Sub
'Initializes ClientSideOnInitDialog
Dim dc As EditorDialogContent = Editor1.DialogContents("InsertOrEditImage")
Dim dlg As Dialog = dc.Dialog
dlg.ClientSideOnInitDialog = "init_dialog"
'This is needed to make sure all child
'controls are created
dlg.ContentContainer.FindControl("AJAXUploader1")
End Sub
Protected Sub AJAXUploader1_FileUploaded(ByVal sender As Object, ByVal e As EventArgs)
'Get the uploader control
Dim uploader As EO.Web.AJAXUploader = CType(sender, EO.Web.AJAXUploader)
'Get the Url of the uploaded files
m_szFileUrl = Path.GetFileName(uploader.PostedFiles(0).FinalFileName)
m_szFileUrl = Path.Combine(uploader.FinalFileLocation, m_szFileUrl)
m_szFileUrl = ResolveUrl(m_szFileUrl)
'Clear the uploader's PostedFiles list
uploader.ClearPostedFiles()
End Sub
Protected Sub CallbackPanel_Execute(ByVal sender As Object, ByVal e As EO.Web.CallbackEventArgs)
'Pass the new Url to the client side
e.Data = m_szFileUrl
End Sub
End Class
When I select an image file in AJAXUploader it is not execiting the function AJAXUploader1_FileUploaded after uploaded the file. So, it is not setting the variable m_szFileUrl. Then, the URL is "undefined" when the second window is showed, as below:  What am I doing wrong? Thanks in advance, Marcelo Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Camarate,
We won't write, review or debug your code for you. Please try to understand the original reply about how this is implemented based on feature of each controls. You can then try to pin down which feature is not working correctly on which control. We can then check that feature for you.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi eo_suport, Thanks for your reply but sorry. I don't want you to write, review or debug my code. What I'm reporting is a possible bug. To try to illustrate better what I'm talking about, see the HTML code below that I only duplicated the CallBackPanel that have the AJAXUploader control to out of the Editor.
Code: HTML/ASPX
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Editor._Default" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script language="JavaScript1.2">
//This function is called after the CallbackPanel
//finishes uploading
function after_update(callback, extraData)
{
//Update the input element
var urlInput = document.getElementsByName("eo_editor_insertimage_url")[0];
urlInput.value = extraData;
//Hide the uploader and displays other elements
document.getElementById("panUpload").style.display = "none";
document.getElementById("panInsert").style.display = "";
}
//This function is called when the dialog is displayed
function init_dialog()
{
//Show the uploader and hide other elements
document.getElementById("panUpload").style.display = "";
document.getElementById("panInsert").style.display = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<eo:Editor ID="Editor1" runat="server" Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" Height="320px" HighlightColor="255, 255, 192"
ToolBarSet="Basic" Width="500px">
<FooterStyle CssText="border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<BreadcrumbItemStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma" />
<EmoticonStyle CssText="background-color:white;border-bottom-color:#c5d3ed;border-bottom-style:solid;border-bottom-width:1px;border-left-color:#c5d3ed;border-left-style:solid;border-left-width:1px;border-right-color:#c5d3ed;border-right-style:solid;border-right-width:1px;border-top-color:#c5d3ed;border-top-style:solid;border-top-width:1px;padding-bottom:2px;padding-left:2px;padding-right:2px;padding-top:2px;" />
<BreadcrumbItemHoverStyle CssText="border-right: darkgray 1px solid; padding-right: 3px; border-top: darkgray 1px solid; margin-top: 1px; padding-left: 3px; font-size: 12px; padding-bottom: 1px; border-left: darkgray 1px solid; padding-top: 1px; border-bottom: darkgray 1px solid; font-family: tahoma; background-color:#e0e0e0;" />
<HeaderStyle CssText="border-right: gray 1px solid; border-top: gray 1px solid; border-left: gray 1px solid; border-bottom: gray 1px" />
<BreadcrumbItemSeparatorStyle CssText="width: 3px; height: 10px" />
<EmoticonDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<BreadcrumbLabelStyle CssText="padding-right: 6px; padding-left: 6px; font-size: 12px; padding-top: 1px; font-family: tahoma" />
<BreadcrumbDropDownStyle CssText="border-top: gray 1px solid; border-right: gray 1px solid; padding-right: 2px; border-top: gray 1px; padding-left: 2px; padding-bottom: 2px; border-left: gray 1px solid; padding-top: 2px; border-bottom: gray 1px solid; background-color: #fafafa" />
<TabButtonStyles>
<NormalStyle CssText="border-right: #335ea8 1px; padding-right: 7px; border-top: #335ea8 1px; padding-left: 7px; font-size: 12px; padding-bottom: 3px; border-left: #335ea8 1px; padding-top: 3px; border-bottom: #335ea8 1px; font-family: tahoma; background-color: white" />
<HoverStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: #c2cfe5" />
<SelectedStyle CssText="border-right: #335ea8 1px solid; padding-right: 6px; border-top: #335ea8 1px solid; padding-left: 6px; font-size: 12px; padding-bottom: 2px; border-left: #335ea8 1px solid; padding-top: 2px; border-bottom: #335ea8 1px solid; font-family: tahoma; background-color: white" />
</TabButtonStyles>
<EditAreaStyle CssText="border-right: gray 1px solid; padding-right: 0px; border-top: gray 1px solid; padding-left: 0px; padding-bottom: 0px; border-left: gray 1px solid; padding-top: 0px; border-bottom: gray 1px solid" />
<DialogContents>
<eo:EditorDialogContent CommandName="InsertOrEditImage">
<ContentTemplate>
<!-- uploader wrapped inside a CallbackPanel -->
<eo:CallbackPanel runat="server" ID="CallbackPanel1" ChildrenAsTriggers="true" OnExecute="CallbackPanel_Execute"
ClientSideAfterUpdate="after_update">
<div id="panUpload">
<eo:AJAXUploader runat="server" ID="AJAXUploader1" Width="350px" TempFileLocation="~/eo_upload"
AutoPostBack="true" FinalFileLocation="~/" OnFileUploaded="AJAXUploader1_FileUploaded">
</eo:AJAXUploader>
</div>
</eo:CallbackPanel>
<!-- original dialog contents, initially invisible -->
<div id="panInsert" style="width: 350px; display: none;">
<table cellspacing="3" cellpadding="1" border="0" width="100%">
<tr>
<td width="60px" nowrap="nowrap">
Url:
</td>
<td colspan="3" nowrap="nowrap">
<input type="text" name="eo_editor_insertimage_url" style="width: 250px;" />
</td>
</tr>
<tr>
<td>
Description:
</td>
<td colspan="3">
<input type="text" name="eo_editor_insertimage_desc" style="width: 250px;" />
</td>
</tr>
<tr>
<td>
Width:
</td>
<td>
<input type="text" name="eo_editor_insertimage_width" style="width: 90px;" />
</td>
<td>
Height:
</td>
<td align="right">
<input type="text" name="eo_editor_insertimage_height" style="width: 90px;" />
</td>
</tr>
<tr>
<td align="right" colspan="4">
<input type="button" name="eo_editor_default_button" value="OK" style="width: 80px;"
onclick="eo_GetContainer(this, 'Editor').execDialogCommand('InsertOrEditImage', this, event);" />
<input type="button" value="Close" style="width: 80px;" onclick="eo_GetContainer(this, 'Editor').closeDialog(this, event);" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</eo:EditorDialogContent>
</DialogContents>
</eo:Editor>
<br />
<!-- DUPLICATED uploader wrapped inside a CallbackPanel -->
<eo:CallbackPanel runat="server" ID="CallbackPanel2" ChildrenAsTriggers="true" OnExecute="CallbackPanel_Execute"
ClientSideAfterUpdate="after_update" BorderColor="#FF8080" BorderStyle="Outset">
<div id="panUpload">
<eo:AJAXUploader runat="server" ID="AJAXUploader2" Width="350px" TempFileLocation="~/eo_upload"
AutoPostBack="true" FinalFileLocation="~/" OnFileUploaded="AJAXUploader1_FileUploaded">
</eo:AJAXUploader>
</div>
</eo:CallbackPanel>
</div>
</form>
</body>
</html>
When I upload a file using the button in the Editor control, the AJAXUploader1_FileUploaded routine is not executed. But, when I upload it through the duplicated CallBackPanel control, the AJAXUploader1_FileUploaded routine is executed. Regards, Marcelo Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, Sorry about that. Please move the following code:
Code: Visual Basic.NET
'Initializes ClientSideOnInitDialog
Dim dc As EditorDialogContent = _
Editor1.DialogContents("InsertOrEditImage")
Dim dlg As Dialog = dc.Dialog
dlg.ClientSideOnInitDialog = "init_dialog"
'This is needed to make sure all child
'controls are created
dlg.ContentContainer.FindControl("AJAXUploader1")
From your Page_Load to OnInit. It will be something like this:
Code: Visual Basic.NET
Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
MyBase.OnInit(e)
....the above code....
End Sub
That should fix the problem for you. Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 9/2/2010
Posts: 120
|
Hi eo_suport,
Thanks for your reply. With your suggestions, the application work fine.
Thank you so much for your help
Regards, marcelo Camarate
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
You are welcome. Glad to hear that it works!
|
|