Uploader in multiple places on one page

Last post 10-10-2010, 10:03 PM by gabriels. 2 replies.
Sort Posts: Previous Next
  •  10-07-2010, 12:25 PM 64352

    Uploader in multiple places on one page

    Hi,
        I am trying to put two uploaders on one page but at different places and I have mutliple forms on the page so I can't include both uploaders in one server form.  I tried couple of ways putting the form on ajax page, placing multiple forms making only one form visible at a time etc but no luck.
     
    I don't have to show both uploaders at the same time. so generating the code randomly is fine too.
     
    Please advise me how to achieve this.
     
    Thanks in advance.
  •  10-08-2010, 10:46 PM 64364 in reply to 64352

    Re: Uploader in multiple places on one page

    Hi gabriels,
     
    Can you explain your requirement on detail? Maybe you can try the example below, tell me if it is not you need.
     
    Please show me more detail, so I can create the example for you.
     
    1. <%@ Page Language="C#" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <script runat="server">  
    6.   
    7.   
    8.     protected void btnShow1_Click(object sender, EventArgs e)  
    9.     {  
    10.         form1.Visible = true;  
    11.         form2.Visible = !form1.Visible;  
    12.     }  
    13.   
    14.     protected void btnShow2_Click(object sender, EventArgs e)  
    15.     {  
    16.         form2.Visible = true;  
    17.         form1.Visible = !form1.Visible;  
    18.     }  
    19. </script>  
    20.   
    21. <html xmlns="http://www.w3.org/1999/xhtml">  
    22. <head runat="server">  
    23.     <title>Untitled Page</title>  
    24. </head>  
    25. <body>  
    26.     <form id="form1" runat="server">  
    27.         <CuteWebUI:UploadAttachments ID="attachment1" runat="server" InsertText="Upload1">  
    28.         </CuteWebUI:UploadAttachments>  
    29.         <asp:Button ID="btnShow2" runat="server" Text="ShowForm2" OnClick="btnShow2_Click" />  
    30.     </form>  
    31.     <form id="form2" runat="server" visible="false">  
    32.         <CuteWebUI:UploadAttachments ID="UploadAttachments1" runat="server" InsertText="Upload2">  
    33.         </CuteWebUI:UploadAttachments>  
    34.         <asp:Button ID="btnShow1" runat="server" Text="ShowForm1" OnClick="btnShow1_Click" />  
    35.     </form>  
    36. </body>  
    37. </html> 
    Regards,
     
    Ken
  •  10-10-2010, 10:03 PM 64385 in reply to 64364

    Re: Uploader in multiple places on one page

    Ken.
     
    I want to switch between the forms through javascript not through the  codebehind and I don't want the page refresh too.
     
    I tried moving the form to div tags with innerHTML depending on the  button clicks through javascript and it works great on firefox and chrome except  internet explorer. when the page loads I am able to upload on IE but when I move the form and when clicked on select a file link, I am getting '__EVENTTARGET' is null or not an object". If you have any workaround for this or any other way to achieve this that would be great. Here is the sample code for testing.
     

    -------------------------------------------------------------------------------------------------
       <div id="placeholder1">Select Files to Upload 1</div>
       ------------------------------------------------------------------------------------------------
       <div id="upload-images">
        <form id="form1" runat="server">
            <div class="content">
                        <h2>
                            Simple Upload (Customizing the UI)
                        </h2>
                        <p>
                            A sample demonstrating how to customize the look and feel of file upload controls.
                            (Maximum file size: 4M).</p>
                       
                        <asp:LinkButton runat="server" ID="Uploader1Insert" Text="Select Files To Upload" />
                        
                        <div id="queuediv" style="display: none;">
                            <div id="queuedivtablecontainer">&nbsp;</div>
                            
                        </div>
                        <br />
                        <CuteWebUI:Uploader runat="server" ID="Uploader1" MultipleFilesUpload="true" InsertButtonID='Uploader1Insert'
                            ProgressPicture="~/sampleimages/bgmenu.gif" TempDirectory="~/UploaderTemp">
                            <ValidateOption MaxSizeKB="4096" />
                        </CuteWebUI:Uploader>
                        
                        <div>
                          <a href="BLOCKED SCRIPTvoid(0);" onclick="UploadAllPhotos();">Upload Photos</a>
                        </div>
                        
            </div>
        </form>    
        </div>
     
      <br />
      <a href="BLOCKED SCRIPTload1();">Move to Placeholder 1</a>     
       
       <script type="text/javascript">
          function load1()
          {
          //    InitializeUploader1();
              document.getElementById("placeholder1").innerHTML = document.getElementById("upload-images").innerHTML;
              document.getElementById("upload-images").innerHTML = "";
          }
       </script>
     
     
    Thanks.
View as RSS news feed in XML