Support forums » Products » Ajax Uploader » Custom Items Table Before Upload

Custom Items Table Before Upload

  •  09-05-2011, 10:44 PM

    Custom Items Table Before Upload

    Reply Quote
    I'm currently evaluating the use of the AJAX Uploader for a VB.Net project I'm working on in Visual Studio 2010 and .Net 4.0 using codebehind files.
     
    So far I've got the upload working fine, but I need to be able to customize the ItemTable before the actual upload takes place. 
     
    The requirements of my application are:
    1. Allow user to select multiple files to upload
    2. Require user to enter in a description of each file PRIOR to upload to server
    3. Allow user to check an optional checkbox to convert the file once uploaded.
    4. If possible, I'd like to show the user a thumbnail of the photo so they can accurately describe it, before uploading.
    5. Have the user click a button to upload the files and show a progress bar per file
    6. Preferable the file would be uploaded directly as a Stream or Byte array so we can store it in our EDMS and not have to worry about temporary files.
     
    My issue seems to be that after selecting files, the GetItemsTable remains visible and I can't figure out why or how to get it to allow me to add the additional fields.  I've tried an ItemTemplate but it doesn't show up.  I've also tried having it display a custom GridView with additional data but that is only showing up after I click the Submit button.
     
    Here's the code I'm currently using:
    1. Protected Overloads Overrides Sub OnPreRender(ByVal e As EventArgs)  
    2.         MyBase.OnPreRender(e)  
    3.   
    4.         SubmitButton.Attributes("itemcount") = Uploader1.Items.Count.ToString()  
    5.   
    6.         'hide the default table     
    7.         Uploader1.GetItemsTable().Visible = False  
    8.   
    9.         DataList1.DataSource = Uploader1.Items  
    10.         DataList1.DataBind()  
    11.     End Sub  
    12.   
    13.   
    14. Private Sub InsertMsg(ByVal msg As String)  
    15.         ListBoxEvents.Items.Insert(0, msg)  
    16.         ListBoxEvents.SelectedIndex = 0  
    17.     End Sub  
    18.     Private Sub SubmitButton_Click(ByVal sender As Object, ByVal e As EventArgs) Handles SubmitButton.Click  
    19.         InsertMsg("You clicked the Submit Button.")  
    20.         InsertMsg("You have uploaded " & uploadcount & "/" & Uploader1.Items.Count & " files.")  
    21.     End Sub  
    22.   
    23.     Private uploadcount As Integer = 0  
    24.   
    25.     Private Sub Uploader_FileUploaded(ByVal sender As Object, ByVal args As UploaderEventArgs) Handles Uploader1.FileUploaded  
    26.         uploadcount += 1  
    27.         InsertMsg("File uploaded! " & args.FileName & ", " & args.FileSize & " bytes.")  
    28.   
    29.         Dim streamFile As Stream = args.OpenStream  
    30.         'upload to EDMS using stream object  
    31.   
    32.     End Sub  
    1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Testing.aspx.vb" Inherits="ezEvidence.Testing" %>  
    2.   
    3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    4.   
    5. <html xmlns="http://www.w3.org/1999/xhtml">  
    6. <head runat="server">  
    7.     <title></title>  
    8. </head>  
    9. <body>  
    10.     <form id="form1" runat="server">  
    11.     <div>  
    12.    <cutewebui:uploadattachments runat="server" ManualStartUpload="true" ID="Uploader1"  
    13.      InsertText="Browse Files"  TempDirectory="~/UploaderTemp" DialogFilter="Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF"  
    14.      showfileicons="true" showprogressbar="true" ItemTemplatePosition="BeforeText">  
    15.      <ItemTemplate>  
    16.          <asp:TextBox ID="txtDescription" runat="server"></asp:TextBox>  
    17.          <asp:CheckBox ID="cbResizeNetRMS" runat="server" />  
    18.      </ItemTemplate>  
    19.    </cutewebui:uploadattachments>  
    20.     <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"  
    21.                 Text="Submit"/>  
    22.   
    23.     <br />  
    24.     <div>  
    25.     <asp:GridView ID="gvUploadItems" runat="server" AutoGenerateColumns="False" DataKeyNames="FileGuid">  
    26.         <Columns>  
    27.             <asp:BoundField DataField="FileGuid" HeaderText="File Guid" />   
    28.             <asp:BoundField DataField="FileName" HeaderText="File Name" />  
    29.             <asp:BoundField DataField="FileSize" HeaderText="File Size" />  
    30.             <asp:ButtonField CommandName="Remove" Text="Remove" />  
    31.             <asp:ButtonField CommandName="Download" Text="Download" />    
    32.         </Columns>    
    33.     </asp:GridView>  
    34.     </div>  
    35.     <asp:DataList ID="DataList1" runat="server">  
    36.         <ItemTemplate>  
    37.             <table border="1">  
    38.                 <tr>  
    39.                     <td>  
    40.                         <%# Eval("FileName") %>  
    41.                     </td>  
    42.                     <td>  
    43.                         <%# Eval("FileSize") %>  
    44.                     </td>  
    45.                     <td>  
    46.                         <%# Eval("FileGuid") %>  
    47.                     </td>  
    48.                 </tr>  
    49.             </table>  
    50.         </ItemTemplate>  
    51.     </asp:DataList>  
    52.   
    53.     <br />  
    54.   
    55.    <div>  
    56.      Server Trace:  
    57.         <br />  
    58.         <asp:ListBox runat="server" ID="ListBoxEvents" Width="400"></asp:ListBox>  
    59.     </div>  
    60.   
    61.   
    62.   
    63.   
    64.             <script type="text/javascript">  
    65.   
    66.                 function submitbutton_click() {  
    67.                     var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');  
    68.                     var uploadobj = document.getElementById('<%=Uploader1.ClientID %>');  
    69.                     if (!window.filesuploaded) {  
    70.                         if (uploadobj.getqueuecount() > 0) {  
    71.                             uploadobj.startupload();  
    72.                         }  
    73.                         else {  
    74.                             var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;  
    75.                             if (uploadedcount > 0) {  
    76.                                 return true;  
    77.                             }  
    78.                             alert("Please browse files for upload");  
    79.                         }  
    80.                         return false;  
    81.                     }  
    82.                     window.filesuploaded = false;  
    83.                     return true;  
    84.                 }  
    85.                 function CuteWebUI_AjaxUploader_OnPostback() {  
    86.                     window.filesuploaded = true;  
    87.                     var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');  
    88.                     submitbutton.click();  
    89.                     return false;  
    90.                 }  
    91.             </script>  
    92.   
    93.     </form>  
    94.      
    95.      
    96.      
    97. </body>  
    98. </html>  
    Any suggestions on how to make this work are greatly appreciated.  If I can get this working I can then recommend that we purchase the AJAX Uploader component to use within our application.
     
    Thanks,
     
    Josh
     
View Complete Thread