|
Rank: Member Groups: Member
Joined: 2/19/2009 Posts: 12
|
Issues with EO.Web's AJAX Uploader
We use your AJAX Uploader for part of an application. This is the behavior the following browsers.
1. In Firefox, when the page loads, the File Uploader is enabled even though we disable it in the code behind. (Also tried disabling it in the aspx)
2. In IE, when the page loads, the file uploader is disabled, and behaves normally.
<eo:AJAXUploader runat="server" id="auImageMedia" CssClass="file-upload" TempFileLocation="~/temp" MaxDataSize="1000" Width="100%" AllowedExtension=".jpg|.jpeg|.gif|.bmp|.png|.txt|.rtf|.doc|.docx|.ppt|.pptx|.xls|.xlsx" MaxFileCount="1" AutoUpload="true" AutoPostBack="true" PostedFileLabelFormat="{posted_file_name}" onfileuploaded="auImageMedia_FileUploaded" > <LayoutTemplate> <table style="width:500px !important;"> <tr> <td valign="top"> <%-- these are controls required for upload but not required to be displayed --%> <asp:PlaceHolder id="PostedFilesPlaceHolder" runat="server" Visible="false">Posted Files Place Holder </asp:PlaceHolder> <asp:Button id="DeleteButton" runat="server" Text="Delete Selected Files" Visible="false"></asp:Button> <asp:Button id="UploadButton" runat="server" Text="Upload" Visible="false"></asp:Button> </td> <td valign="top"> <asp:PlaceHolder id="InputPlaceHolder" runat="server" >Input Box Place Holder</asp:PlaceHolder> </td> <td valign="top"> <eo:ProgressBar id="ProgressBar" runat="server" ControlSkinID="None" Height="20px" Width="250" BorderColor="#336699" BorderStyle="Solid" BorderWidth="1px" IndicatorColor="151, 198, 232"></eo:ProgressBar> </td> </table> </LayoutTemplate> </eo:AJAXUploader>
We want to enable the control only when the drop down has changed.
protected void ddlUploadDocumentType_SelectedIndexChanged(object sender, EventArgs e) { auImageMedia.Enabled = true; }
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Thanks for posting in the support forum. This is normal for any control that contains child HTML elements. You can perform a simple test by placing a Panel in your form, then place a Button inside the Panel and set the Panel's Enabled to false. Run the page and you will see IE disables the Button, which makes sense because its parent element (Panel) has been disabled. However FireFox will not disable the Button because it literally interprets disabled as disabling the target element only. IE's behavior makes much more sense, but FireFox keeps arguing they are just trying to stick to the standard.
A number of workaround exists. The easiest workaround is to instead of disabling/enabling the control, try to show/hide it. IE and FireFox both agree that if a parent element is hidden, all child elements would be hidden. So this is the easiest and cleanest solution.
Another workaround is to use JavaScript code to recursively disable all child elements when disabling the parent element. We have such code internally and it could make sense to have this code built-in AJAXUploader so that you don't need to worry about it. So we will look into that and see if we can do that.
Thanks!
|
|
Rank: Member Groups: Member
Joined: 2/19/2009 Posts: 12
|
Why don't the toolbar buttons disable?
I tried
toolbar.Disabled = true toolbar.Items[0].Disabled = true
Its the same effect. these toolbar items look like things you have generated with Divs and images.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Rahul Singh wrote:Why don't the toolbar buttons disable? We are not aware any problem with disabling toolbar button. When a button is disabled, it does not fire server or client side event when clicked. If you have an image, the image will be automatically grayed out. If the button has a text label, it will NOT be grayed out on FireFox due to the same reason for your original uploader question. Rahul Singh wrote: toolbar.Items[0].Disabled = true
This is the correct form. Rahul Singh wrote:these toolbar items look like things you have generated with Divs and images. I am not sure how this is related to your question. Please clarify. Thanks!
|
|
Rank: Member Groups: Member
Joined: 2/19/2009 Posts: 12
|
Ok. So if we get rid of the text, then it will be disabled?
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Just to clarify, when you disable a button:
1. The button (which includes the image, and optionally text) is disabled. So you can not click it;
2. The image should be grayed out;
3. The text will not be grayed out on FireFox. It will be grayed out on IE;
Removing the text affects #3 but not anything else.
Hope this clears up.
Thanks!
|
|
Rank: Member Groups: Member
Joined: 2/19/2009 Posts: 12
|
It still shows up as enabled in Firefox.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
Please create a test page that demonstrates the problem. Also make sure you include accurate and detailed description of the problem. For example, when you say "It still shows up as enabled", we have the following questions:
1. What action have you taken?
2. We do not know exactly what you mean by "it", whether it be the whole toolbar, the image, or the text? Or something else?
3. We do not know exactly what you mean by "shows up as enabled". Whether it is black, gray or user can click it?
Without these questions answered, we won’t be able to respond to your question at all. So it is important for you to clear describe your situation when you post your question.
Thanks!
|
|
Rank: Member Groups: Member
Joined: 2/19/2009 Posts: 12
|
I read what you said, and asked if I took out the text, would it disable the button. Your response was yes. So I did, and the button was still enabled.
Here is the code for the toolbar and the uploader.
<td> <eo:ToolBar runat="server" id="tbBrowseDocument" Width="125px" BackgroundImage="00100203" > <DownStyle CssText="BORDER-RIGHT: #335ea8 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #335ea8 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; BORDER-LEFT: #335ea8 1px solid; CURSOR: hand; PADDING-TOP: 3px; BORDER-BOTTOM: #335ea8 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #ffe1ac"></DownStyle> <HoverStyle CssText="BORDER-RIGHT: #335ea8 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #335ea8 1px solid; PADDING-LEFT: 3px; FONT-SIZE: 12px; PADDING-BOTTOM: 2px; BORDER-LEFT: #335ea8 1px solid; CURSOR: hand; PADDING-TOP: 2px; BORDER-BOTTOM: #335ea8 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #ffe1ac"></HoverStyle> <NormalStyle CssText="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 3px; CURSOR: hand; BORDER-TOP-STYLE: none; PADDING-TOP: 3px; FONT-FAMILY: Tahoma; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none"></NormalStyle> <Items> <eo:ToolBarItem ToolTip="Browse for Document" ImageUrl="00101003" CommandName="Save" Disabled=true></eo:ToolBarItem> </Items> </eo:ToolBar> </td> <td align="left"> <eo:AJAXUploader runat="server" id="auImageMedia" CssClass="file-upload" TempFileLocation="~/temp" MaxDataSize="1000" Width="100%" AllowedExtension=".jpg|.jpeg|.gif|.bmp|.png|.txt|.rtf|.doc|.docx|.ppt|.pptx|.xls|.xlsx" MaxFileCount="1" AutoUpload="true" AutoPostBack="true" PostedFileLabelFormat="{posted_file_name}" onfileuploaded="auImageMedia_FileUploaded" StartToolBarButton="tbBrowseDocument:Save" ClientSideOnError="CustomErrorHandler" Visible="true"> <LayoutTemplate> <eo:ProgressBar id="ProgressBar" runat="server" ControlSkinID="None" Height="20px" Width="300" BorderColor="#336699" BorderStyle="Solid" BorderWidth="1px" IndicatorColor="151, 198, 232"></eo:ProgressBar> </LayoutTemplate> </eo:AJAXUploader>
</td>
Here is the code for turning the fileuplaoder on and off
private void FileUploaderOff() {
tbBrowseDocument.Enabled = false; tbBrowseDocument.Items[0].Disabled = true; auImageMedia.Enabled = false; }
private void FileUploaderOn() {
tbBrowseDocument.Enabled = true; tbBrowseDocument.Items[0].Disabled = false; auImageMedia.Enabled = true; }
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Hi,
This last post provided information that you have not provided in previous post, that is you are using the toolbar with the AJAXUploader together.
When you connect an AJAXUploader to the toolbar, the two toolbar buttons (upload and cancel upload) are being "taken over" by the uploader. So the uploader would enable/disable the buttons. This causes the toolbar to ignore your enable/disable settings on the toolbar item.
The solution for this is when you want to disable the upload button, you also hide the uploader (setting the uploader's Visible to false). This way the uploader will stop taking over the buttons and the button will take whatever enable value you set.
As you can see, it is very important for you to provide detailed information when you post a question. Otherwise both you and us would be going circles.
Thanks!
|
|
Rank: Member Groups: Member
Joined: 2/19/2009 Posts: 12
|
This solution initially seemed like it was working however the file was not posting, and neither was the FileUploaded event.
After I took out the code which toggled the visibility of the fileuploader, the application continues to work, except of course in FFX where the Browse button is always enabled.
|
|
Rank: Administration Groups: Administration
Joined: 5/27/2007 Posts: 24,194
|
Rahul Singh wrote:This solution initially seemed like it was working however the file was not posting, and neither was the FileUploaded event. I do not believe this has anything to do with the uploader. The basic rule is when the uploader is visible, you can upload and get FileUploaded event. When the uploader is not visible, you get neither. If these two basic scenarios run fine but run into problem when you have code to mix these two scenarios, it's almost certainly has to do with the additional code you added. In this case you can try to get the two basic scenarios working first, then troubleshoot the additional code. If you believe this is an uploader problem, please create a complete test page with detailed step by step instruction to reproduce the problem. Since we will need to run the page in order to see the problem, we will not be able to look into any code that would not run independently. Thanks!
|
|