Welcome Guest Search | Active Topics | Sign In | Register

AJAX Uploader Issues - Example File. Options
Kesah
Posted: Thursday, April 9, 2009 1:27:57 PM
Rank: Member
Groups: Member

Joined: 2/19/2009
Posts: 12
How it is supposed to behave in both IE and in Firefox.

1. The toolbar item for "Browse for Document" should be disabled on page load.
2. Once a selection list item is selected, the "Browse for Document" button should be enabled.
3. After the "Browse for Document" button is enabled, the use then and only then should be able to upload.

Here's how it behaves in IE.

1. The tool bar item for "Browse for Document" IS disabled. (Great!)
2. Once a selection list item is selected, the "Browse for Document" button IS enabled. (Great!)
3. The button responds fine to an 'OnMouseOver'/hover HOWEVER only part of the button responds to 'OnClick'/click. (The area that covers "for Document" on the button.) This is really strange.
IF you click the special area, thats the only time it works. (NOT GOOD!)

Here's how it behaves in Firefox.

1. The tool bar item for "Browse for Document" IS ENABLED. (NOT GOOD!)
2. Doesn't make a difference, the "Browse for Document" button IS ALWAYS enabled. (Great!)
3. The "Browse for Document" button ALWAYS WORKS, better than in IE (NOT GOOD!)

Here is the code for Default.aspx
---------------------- BEGIN Default.aspx --------------------------
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="eo" Namespace="EO.Web" Assembly="EO.Web" %>

<!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>
</head>


  
<body>
    <form id="form1" runat="server">
    
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"   />
  <style type="text/css">
    input.uploader_delete_button_style, .uploader_upload_button_style, .uploader_cancel_button_style
    {
    	display:none !important;
    }
    
    
  </style>
    <div>
    
<asp:UpdatePanel ID="upnlDocuments" runat="server"  UpdateMode="Always"  >
<ContentTemplate>

<div class="upload-document" id="file-uploader">
<asp:Label ID="fileUploadStatus" runat="server"></asp:Label>
<h3><asp:label ID="lblUploadPanelTitle" runat="server">Upload a File</asp:label></h3>

<table width="100%" style="width:650px !important;">
<tr>
<td valign="top" class="report-type-select">
    <asp:HyperLink CssClass="alert-message" ID="resourceHelpLink" runat="server" Target="_blank">.</asp:HyperLink> 
</td>
<td valign="top" class="report-type-select">    
    <asp:DropDownList ID="ddlUploadDocumentType" runat="server" AutoPostBack="true" 
        onselectedindexchanged="ddlUploadDocumentType_SelectedIndexChanged">
        <asp:ListItem Text="Select an Item to Enable Uploader" Value="1"></asp:ListItem>
        <asp:ListItem Text="There you go." Value="2"></asp:ListItem>
        <asp:ListItem Text="This one will also work." Value="3"></asp:ListItem>
    </asp:DropDownList>
                                                        
</td>
<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 Text="Browse for Document" ToolTip="Browse for Document" ImageUrl="00101003" CommandName="Save" Disabled=true></eo:ToolBarItem>		
	</Items>
</eo:ToolBar>
</td>
<td align="left" width="290">
    <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="275" BorderColor="#336699"
             BorderStyle="Solid" BorderWidth="1px" IndicatorColor="151, 198, 232"></eo:ProgressBar>    
	    </LayoutTemplate>
	</eo:AJAXUploader>
</td>						
</tr>
</table>
</div>

</ContentTemplate>
</asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

----------------------------- END Default.aspx ---------------------------------
----------------------------- BEGIN Default.aspx.cs ---------------------------------
Code: C#
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        FileUploaderOff();
    }

    protected void ddlUploadDocumentType_SelectedIndexChanged(object sender, EventArgs e)
    {
        //if (ddlUploadDocumentType.SelectedIndex &gt; 0)
        //{
        FileUploaderOn();
        //}
    }

    private void FileUploaderOff()
    {

        //imgDisabledBrowse.Visible = true;
        //dvProgressBar.Visible = true;
        //tbBrowseDocument.Visible = false;
        //auImageMedia.Visible = false;

        tbBrowseDocument.Enabled = false;
        tbBrowseDocument.Items[0].Disabled = true;
        //auImageMedia.Enabled = false;
        //auImageMedia.Visible = false;        

    }

    private void FileUploaderOn()
    {
        //imgDisabledBrowse.Visible = false;
        //dvProgressBar.Visible = false;
        //tbBrowseDocument.Visible = true;
        //auImageMedia.Visible = true;

        tbBrowseDocument.Enabled = true;
        tbBrowseDocument.Items[0].Disabled = false;
        //auImageMedia.Enabled = true;
        //auImageMedia.Visible = true;

        //tbBrowseDocument.Items[0].Disabled = false;        
    }

    protected void auImageMedia_FileUploaded(object sender, EventArgs e)
    {
        if (auImageMedia.PostedFiles[0].Length != 0)
        {

        }

        auImageMedia.ClearPostedFiles();

    }
}

----------------------------- ENDDefault.aspx.cs ---------------------------------


eo_support
Posted: Thursday, April 9, 2009 3:59:03 PM
Rank: Administration
Groups: Administration

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

I believe this issue was previous discussed here:

http://www.essentialobjects.com/forum/postst2907_AJAX-Uploader-is-not-disabling-in-Firefox-works-in-IE.aspx

In order to disable a toolbar item from the ToolBar or ToolBarItem object, you must remove or hide the uploader first.

Thanks!
Kesah
Posted: Thursday, April 9, 2009 4:05:45 PM
Rank: Member
Groups: Member

Joined: 2/19/2009
Posts: 12
Notice the commented code. All those different options you provided don't work to achieve the same behavior consistently across Firefox and IE.
eo_support
Posted: Thursday, April 9, 2009 4:22:49 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
We did see that and verified that it works. The only difference is in FireFox you will not see the text grayed out, while the bottom is still disabled (no window comes up if you click it). I believe this was thoroughly explained in the other post as well.
Kesah
Posted: Thursday, April 9, 2009 4:30:55 PM
Rank: Member
Groups: Member

Joined: 2/19/2009
Posts: 12
Do you mind putting the codebehind for what is working for you? Because it's not working here.
eo_support
Posted: Thursday, April 9, 2009 4:37:51 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Here you go:

Code: C#
private void FileUploaderOff()
{
    auImageMedia.Visible = false;
    tbBrowseDocument.Items[0].Disabled = true;
}

private void FileUploaderOn()
{
    auImageMedia.Visible = true;
    tbBrowseDocument.Items[0].Disabled = false;
}


One more thing you want to be aware is, and this applies to both IE and FireFox, is that your browse button should be the roughly the same size or smaller as the original browse button. Otherwise certain region of the button can be “clicked”, but won’t bring up the browse dialog. In your case if you click the word “Browse”, it won’t bring up the dialog. But if you click “Document” it will.


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.