Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » AJAX Uploader disabled rendering in Chrome and Firefox

AJAX Uploader disabled rendering in Chrome and Firefox Options
Previous Topic · Next Topic
Darrell Reinke
Posted: Thursday, February 14, 2013 9:11:20 AM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Good Morning,

I have an AJAX Uploader that renders correctly (the way I expect) within Internet Explorer. However, when it is rendered in Chrome is doesn't show the Input Box Placeholder and the "Browse" button says "Choose File" and it is enabled (should be disabled). Within FireFox, the uploader renders correctly, however, the "Browse" button is enabled and should be disabled.

At a minimum I need the input buttons disabled upon the initial rendering. If I need to do this manually, I will get that figured out, however, I would expect the object to render in Chrome and FireFox to render as it does in IE.

Any help would be appreciated.

I am using the latest version of EO Objects. Chrome is Version 24.0.1312.57 m and FireFox version is 18.0.2. IE is 9.0

Side note: if I want to post an image on this site do I need to put an <img> tag with a url to the image inside your tag? Just curious......

Here is the object definition:
Code: HTML/ASPX 
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html />
<html>
<head runat="server">
   <title></title>
</head>
<body>
   <form id="form1" runat="server">
   <div>
      <eo:AJAXUploader ID="uldrDocMgmt1" runat="server" Enabled="false" Font-Names="Tahoma" Font-Size="9pt" AutoPostBack="True" TempFileLocation="~/uploadtemp" FinalFileLocation="~/upload"
         ClientSideOnCancel="uploader_canceled" ClientSideOnError="CustomErrorHandler" AllowedExtension="" Width="700px">
         <LayoutTemplate>
            <table style="padding: 2; width: 675px;">
               <tr>
                  <td>
                     <asp:PlaceHolder ID="InputPlaceHolder" runat="server">Input Box Place Holder</asp:PlaceHolder>
                  </td>
                  <td style="padding-left: 4px;">
                     <asp:Button ID="UploadButton" runat="server" Text="Upload" />
                  </td>
               </tr>
               <tr>
                  <td>
                     <asp:PlaceHolder ID="ProgressTextPlaceHolder" runat="server">Progress Text Place Holder</asp:PlaceHolder>
                  </td>
               </tr>
            </table>
         </LayoutTemplate>
      </eo:AJAXUploader>
   </div>
   </form>
</body>
</html>
Back to top
 
Darrell Reinke
Posted: Thursday, February 14, 2013 12:47:32 PM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
Due to the rendering not being the same between IE/Chrome/Firefox, I have come up with a solution that basically gives me the same functionality. By taking out the Upload button from within the AJAX Uploader and creating my own javascript to handle the upload, this allows me to perform my own validation before I allow the file to be uploaded.

Formatting is not pretty across all browsers, however, it functions the same. I will leave the CSS styles up to the end user if you choose to use this example.

Code: HTML/ASPX 
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html />
<html>
<head runat="server">
   <title></title>
   <script type="text/javascript">
         function errorMsg(asError, asValue) {
         var sAlert = "";
         sAlert = "There was an problem with " + asValue + ".<br />";
         sAlert += "Error Description:  " + asError + "<br /><br />";
         sAlert += "Click OK to continue.<br /><br />";
         eo_MsgBox("msgAttention",   //ClientID of the MsgBox control
                   "<span style='font-weight:bold;color:white;'>ATTENTION!  An ERROR has occured</span>", //Message box title
                   sAlert, //Message box text
                   "Images/close_24.hot.gif", //No message box icon
                   [{ Text: "     OK     "}] //Providing an array of buttons
                   );
      } //End errorMsg(asError, asValue);

      function uploader_canceled() {
         //When the uploader is canceled, the uploader will not continue
         //to postback the page, so we have to post back manually at here
         //We pass a special value "NO_FILE_SUBMIT" here, our server side
         //code checks for this special value in Page_Load
         __doPostBack("NO_FILE_SUBMIT");
      }

      function uploadData() {
         try {
            //Get the AJAX uploader
            var uploader = eo_GetObject("<%=AJAXUploader1.ClientID %>");

            if (!uploader.isRunning()) {
               //check to see if a file has been selected or other validation...
               if (uploader.isEmpty()) {
                  errorMsg("Please choose a file before trying to upload a document.", "uploading a document");
               }
               else {
                  //Start uploading. We have set the uploader's AutoPostBack to true,
                  //so if the uploading was sucessful, the page will be posted back
                  //as soon as the uploading is finished. If the uploading was not
                  //sucessful (for example, when no file has been selected), our
                  //ClientSideOnProgress handler will be called with both total and
                  //received argument as null. In that case we will call
                  //_doPostBack to submit the page
                  uploader.upload();
               } //end if (uploader.isEmpty()) {
            } //end if (!uploader.isRunning()) {
         }
         catch (errorObject) {
            var sFunction = "uploadData()";
            errorMsg(errorObject.description, sFunction);
            return false;
         }
      } //end function uploadData() {
   </script>
</head>
<body>
   <form id="form1" runat="server">
   <p>Choose File to be Uploaded:</p>
   <table style="width:100%">
      <tr>
         <td style="width:60%;">
            <eo:AJAXUploader runat="server" ID="AJAXUploader1" Width="100%" AutoPostBack="True" TempFileLocation="~/uploadtemp" FinalFileLocation="~/upload" ClientSideOnCancel="uploader_cancelled">
               <LayoutTemplate>
                  <table style="width: 100%;">
                     <tr>
                        <td>
                           <asp:PlaceHolder ID="InputPlaceHolder" runat="server">Input Box Place Holder</asp:PlaceHolder>
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <eo:ProgressBar ID="ProgressBar" runat="server" ControlSkinID="Windows_XP">
                           </eo:ProgressBar>
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <asp:PlaceHolder ID="ProgressTextPlaceHolder" runat="server">Progress Text Place Holder </asp:PlaceHolder>
                        </td>
                     </tr>
                  </table>
               </LayoutTemplate>
            </eo:AJAXUploader>
         </td>
         <td style="text-align:left;vertical-align:top;padding-top:6px;">
            <input type="button" value="Upload" onclick="uploadData()" />
         </td>
      </tr>
   </table>
   <eo:MsgBox ID="msgAttention" runat="server" AllowResize="True" BorderColor="#335C88" BorderStyle="Solid" BorderWidth="1px" CloseButtonUrl="00070101" ControlSkinID="None" HeaderHtml="Active Transfer exists -- Please Read."
      MinimizeButtonUrl="00070102" ResizeImageUrl="00020014" RestoreButtonUrl="00070103" ShadowColor="LightGray" ShadowDepth="3" Width="450px">
      <MsgBoxButtonStyle CssText="font-family:Tahoma;font-size:9pt;" />
      <HeaderStyleActive CssText="background-image:url(00070104);font-family:tahoma;font-size:9pt;padding-bottom:3px;padding-left:4px;padding-right:4px;padding-top:3px;" />
      <ContentStyleActive CssText="border-top: #335c88 1px solid; background-color: #e5f1fd" />
      <FooterStyleActive CssText="background-color: #e5f1fd; padding-bottom: 8px;" />
   </eo:MsgBox>   
   </form>
</body>
</html>
Back to top
 
eo_support
Posted: Thursday, February 14, 2013 1:47:31 PM
Rank: Administration
Groups: Administration

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

As to disabled issue, the root of the problem is for some reason Chrome does not disable an inner element when an outer element is disabled. We could patch this up by populating the root element's disabled attribute to all the file input elements, but that can cause problem if you use script to change the root element's disabled attribute.

In order to post an image here, you would need to click "Post Reply" at the top of the thread (do not use "Quick Reply" at the bottom), you will see an "Insert Image" button. You will have to host the image somewhere else and then enter the link here.

Your workaround makes perfect sense. Thanks for sharing.

Thanks!
Back to top
 
Darrell Reinke
Posted: Thursday, February 14, 2013 2:23:27 PM
Rank: Advanced Member
Groups: Member

Joined: 7/18/2008
Posts: 76
No need. The new solution I came up with gives me greater flexibility when when it comes to additional validation prior to uploading the file.

Thank you for the explanation. Maybe one day (that's a big MAYBE), all of the browsers will start behaving/rendering the same.
Back to top
 


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.