Capturing a title for each uploaded file

Last post 02-10-2011, 2:44 PM by MrMagoo. 2 replies.
Sort Posts: Previous Next
  •  01-05-2011, 12:44 PM 65598

    Capturing a title for each uploaded file

    Is it possible to display a text box (required field) for each uploaded file where the user can enter a title or caption? This title should be available in the code-behind so I can use it to store in my DB.
  •  01-05-2011, 8:38 PM 65605 in reply to 65598

    Re: Capturing a title for each uploaded file

    Hi mrichman,
     
    Please try the example below
     
    1. <%@ Page Language="C#" %>  
    2.   
    3. <%@ Import Namespace="CuteWebUI" %>  
    4. <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>  
    5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    6.   
    7. <script runat="server">  
    8.   
    9.     protected void UploadAttachments1_AttachmentAdded(object sender, AttachmentItemEventArgs args)  
    10.     {  
    11.         TextBox tb = (TextBox)args.Item.FindControl("textboxDesc");  
    12.         tb.Text = args.Item.ClientData;  
    13.     }  
    14.   
    15.     protected void UploadAttachments1_AttachmentCreated(object sender, AttachmentItemEventArgs args)  
    16.     {  
    17.         TextBox tb = (TextBox)args.Item.FindControl("textboxDesc");  
    18.         tb.TextChanged += new EventHandler(tb_TextChanged);  
    19.     }  
    20.   
    21.     void tb_TextChanged(object sender, EventArgs e)  
    22.     {  
    23.         TextBox tb=(TextBox)sender;  
    24.         for (Control c = tb; c != null; c = c.Parent)  
    25.         {  
    26.             if (c is AttachmentItem)  
    27.             {  
    28.                 ((AttachmentItem)c).ClientData = tb.Text;  
    29.                 return;  
    30.             }  
    31.         }  
    32.     }  
    33.   
    34.     protected void buttonTell_Click(object sender, EventArgs e)  
    35.     {  
    36.         StringBuilder sb = new StringBuilder();  
    37.         sb.Append("There's " + UploadAttachments1.Items + " items:");  
    38.         foreach (AttachmentItem item in UploadAttachments1.Items)  
    39.         {  
    40.             sb.Append("<br/>");  
    41.             sb.Append(item.FileName);  
    42.             sb.Append("    -    ");  
    43.             sb.Append(item.ClientData);  
    44.         }  
    45.         labelMsg.Text = sb.ToString();  
    46.     }  
    47. </script>  
    48.   
    49. <html xmlns="http://www.w3.org/1999/xhtml">  
    50. <head id="Head1" runat="server">  
    51.     <title>Untitled Page</title>  
    52. </head>  
    53. <body>  
    54.     <form id="form1" runat="server">  
    55.         <div>  
    56.             <button id='btnUpload' style="display: none;" onclick="Upload_Click();return false;">  
    57.                 Start Upload</button>  
    58.             <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" ManualStartUpload="True"  
    59.                 OnAttachmentAdded="UploadAttachments1_AttachmentAdded" OnAttachmentCreated="UploadAttachments1_AttachmentCreated"  
    60.                 NumFilesShowCancelAll="1000" InsertText="Add files">  
    61.                 <ItemTemplate>  
    62.                     <asp:TextBox runat="server" ID="textboxDesc" />  
    63.                 </ItemTemplate>  
    64.             </CuteWebUI:UploadAttachments>  
    65.             <br />  
    66.             <table id='clientTable' style="display: none; font-size: 9pt; border-collapse: collapse"  
    67.                 border="1" cellspacing="0" cellpadding="5">  
    68.                 <tr>  
    69.                     <td>  
    70.                         FileName  
    71.                     </td>  
    72.                     <td>  
    73.                         Description  
    74.                     </td>  
    75.                     <td>  
    76.                         Status  
    77.                     </td>  
    78.                 </tr>  
    79.             </table>  
    80.             <br />  
    81.             <asp:Button runat=server ID="buttonTell" Text="Tell me how to get the server textbox values" OnClick="buttonTell_Click" OnClientClick="return buttonTell_Click()" />  
    82.             <br />  
    83.             <asp:Label runat=server ID="labelMsg" />  
    84.         </div>  
    85.     </form>  
    86. </body>  
    87.   
    88. <script>  
    89.     var btnUpload=document.getElementById("btnUpload");  
    90.     var clientTable=document.getElementById("clientTable");  
    91.     var uploader=document.getElementById('<%=UploadAttachments1.ClientID %>');  
    92.     var buttonTell=document.getElementById('<%=buttonTell.ClientID %>');  
    93.     var buttonTellClicked=false;  
    94.       
    95.     function Upload_Click()  
    96.     {  
    97.         uploader.startupload();  
    98.     }  
    99.       
    100.     function buttonTell_Click()  
    101.     {  
    102.         buttonTellClicked=true;  
    103.         var items=uploader.getitems();  
    104.         for(var i=0;i<items.length;i++)  
    105.         {  
    106.             switch(items[i].Status)  
    107.             {  
    108.                 case "Queue":  
    109.                 case "Upload":  
    110.                     uploader.startupload();  
    111.                     return false;  
    112.             }  
    113.         }  
    114.         return true;  
    115.     }  
    116.       
    117.     function CuteWebUI_AjaxUploader_OnPostback()  
    118.     {  
    119.         if(buttonTellClicked)  
    120.         {  
    121.             buttonTell.click();  
    122.             return false;  
    123.         }  
    124.     }  
    125.       
    126.     function CuteWebUI_AjaxUploader_OnQueueUI(files)  
    127.     {  
    128.         btnUpload.style.display=files.length>0?"":"none";  
    129.           
    130.         clientTable.style.display=files.length>0?"":"none";  
    131.           
    132.         ShowMyClientTable(files);  
    133.           
    134.         return false;  
    135.     }  
    136.       
    137.     function ShowMyClientTable(files)  
    138.     {  
    139.         var map={}  
    140.         var newlist=[];  
    141.         for(var i=1;i<clientTable.rows.length;i++)  
    142.         {  
    143.             var row=clientTable.rows.item(i);  
    144.             row._scan=false;  
    145.             map[row._filekey]=row;  
    146.         }  
    147.         //update existing row  
    148.         for(var i=0;i<files.length;i++)  
    149.         {  
    150.             var file=files[i];  
    151.             var row=map[file.InitGuid||file.FileName];  
    152.             if(row==null)  
    153.             {  
    154.                 newlist.push(file);  
    155.                 continue;  
    156.             }  
    157.             row._scan=true;  
    158.             UpdateToRow(row,file);  
    159.         }  
    160.         //delete removed row  
    161.         for(var i=1;i<clientTable.rows.length;i++)  
    162.         {  
    163.             var row=clientTable.rows.item(i);  
    164.             if(!row._scan)  
    165.             {  
    166.                 clientTable.deleteRow(i);  
    167.                 i--;  
    168.             }  
    169.         }  
    170.         //add new row:  
    171.         for(var i=0;i<newlist.length;i++)  
    172.         {  
    173.             var file=newlist[i];  
    174.             var row=clientTable.insertRow(-1);  
    175.             row.insertCell(-1);  
    176.             row.insertCell(-1);  
    177.             row.insertCell(-1);  
    178.             UpdateToRow(row,file);  
    179.         }  
    180.     }  
    181.     function UpdateToRow(row,file)  
    182.     {  
    183.         row._file=file;  
    184.           
    185.         row._filekey=file.InitGuid||file.FileName;  
    186.           
    187.         if(!row._textbox)  
    188.         {  
    189.             row._textbox=document.createElement("INPUT");  
    190.             row._textbox.type="text";  
    191.             row.cells.item(1).appendChild(row._textbox);  
    192.         }  
    193.           
    194.         row._textbox.onchange=function()  
    195.         {  
    196.             file.SetClientData(row._textbox.value);  
    197.         }  
    198.           
    199.         row.cells.item(0).innerHTML=file.FileName;  
    200.           
    201.         switch(file.Status)  
    202.         {  
    203.             case "Queue":  
    204.                 row.cells.item(2).innerHTML="<a href='#' onclick='CancelQueueItem(this);return false'>remove</a>";  
    205.                 break;  
    206.             case "Finish"://uploaded  
    207.             case "Upload"://uploading  
    208.             case "Error"://cancelled  
    209.             default:  
    210.                 row.cells.item(2).innerHTML=file.Status;  
    211.                 break;  
    212.         }  
    213.     }  
    214.     function CancelQueueItem(link)  
    215.     {  
    216.         var td=link.parentNode;  
    217.         var row=td.parentNode;  
    218.         var file=row._file;  
    219.         file.Cancel();  
    220.     }  
    221.       
    222. </script>  
    223.   
    224.   
    225. <script type="text/javascript">  
    226.     //prevent duplicated items:  
    227.     function CuteWebUI_AjaxUploader_OnSelect(files)  
    228.     {  
    229.         var sames=[];  
    230.         var items=uploader.getitems();  
    231.         for(var i=0;i<files.length;i++)  
    232.         {  
    233.             var file=files[i];  
    234.             var exists=false;  
    235.             for(var j=0;j<items.length;j++)  
    236.             {  
    237.                 var item=items[j];  
    238.                 if(item.FileName==file.FileName)  
    239.                 {  
    240.                     exists=true;  
    241.                 }  
    242.             }  
    243.             if(exists)  
    244.             {  
    245.                 sames.push(file.FileName);  
    246.                 file.Cancel();  
    247.             }  
    248.         }  
    249.         if(sames.length>0)  
    250.         {  
    251.             alert("These file(s) are already in the queue : \r\n\t"+sames.join('\r\n\t'));  
    252.         }  
    253.     }  
    254. </script>  
    255.   
    256. </html> 
     
     
    Regards,
     
    Ken
  •  02-10-2011, 2:44 PM 66159 in reply to 65605

    Re: Capturing a title for each uploaded file

    I've implemented the code above and changed it to use multiple files, but the "clientTable" never updates. The files are listed in the standard table with the checkbox/paperclip but it does have the textbox for the file description.
     
    I'm using the Uploader and UploadAttachments within an asp.net wizard if that makes any difference.
     
    Any ideas?
View as RSS news feed in XML