Custom validation before uploading files

Last post 12-29-2011, 6:31 AM by Kenneth. 1 replies.
Sort Posts: Previous Next
  •  12-28-2011, 11:03 AM 72448

    Custom validation before uploading files

    Hi,
           What is the best way to
          1) allow users to select the files for upload
          2) do custom validation and allow user to enter additional meta data about the files
         3)  start the file upload
     
         I modified the manual upload sample to do this but sometimes in the function CuteWebUI_AjaxUploader_OnQueueUI(list) - the list shows as empty by the time I want to do the upload  even though the user previously selected files and as a result no upload takes place. It works sometimes and other times does not. Does the list get affected by other postbacks in the page ?  Is there a workaround to prevent the list from becoming empty?
     
    Thanks. 
     
      
  •  12-29-2011, 6:31 AM 72457 in reply to 72448

    Re: Custom validation before uploading files

    Hi Pbanerji,
     
     
    1) allow users to select the files for upload
     
    Can you explain it in detail? by default the uploader allow user to select files for upload.
     
    2) do custom validation and allow user to enter additional meta data about the files
     
    The example below shows you how to add the additional data
     
    <%@ Page Language="C#" %>
    <%@ Import Namespace="CuteWebUI" %>
    <%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
    protected void UploadAttachments1_AttachmentAdded(object sender, AttachmentItemEventArgs args)
    {
    TextBox tb = (TextBox)args.Item.FindControl("textboxDesc");
    tb.Text = args.Item.ClientData;
    }
    protected void UploadAttachments1_AttachmentCreated(object sender, AttachmentItemEventArgs args)
    {
    TextBox tb = (TextBox)args.Item.FindControl("textboxDesc");
    tb.TextChanged += new EventHandler(tb_TextChanged);
    }
    void tb_TextChanged(object sender, EventArgs e)
    {
    TextBox tb=(TextBox)sender;
    for (Control c = tb; c != null; c = c.Parent)
    {
    if (c is AttachmentItem)
    {
    ((AttachmentItem)c).ClientData = tb.Text;
    return;
    }
    }
    }
    protected void buttonTell_Click(object sender, EventArgs e)
    {
    StringBuilder sb = new StringBuilder();
    sb.Append("There's " + UploadAttachments1.Items + " items:");
    foreach (AttachmentItem item in UploadAttachments1.Items)
    {
    sb.Append("<br/>");
    sb.Append(item.FileName);
    sb.Append("&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;");
    sb.Append(item.ClientData);
    }
    labelMsg.Text = sb.ToString();
    }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title>Untitled Page</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <button id='btnUpload' style="display: none;" onclick="Upload_Click();return false;">
    Start Upload</button>
    <CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" ManualStartUpload="True"
    OnAttachmentAdded="UploadAttachments1_AttachmentAdded" OnAttachmentCreated="UploadAttachments1_AttachmentCreated"
    NumFilesShowCancelAll="1000" InsertText="Add files">
    <ItemTemplate>
    <asp:TextBox runat="server" ID="textboxDesc" />
    </ItemTemplate>
    </CuteWebUI:UploadAttachments>
    <br />
    <table id='clientTable' style="display: none; font-size: 9pt; border-collapse: collapse"
    border="1" cellspacing="0" cellpadding="5">
    <tr>
    <td>
    FileName
    </td>
    <td>
    Description
    </td>
    <td>
    Status
    </td>
    </tr>
    </table>
    <br />
    <asp:Button runat=server ID="buttonTell" Text="Tell me how to get the server textbox values" OnClick="buttonTell_Click" OnClientClick="return buttonTell_Click()" />
    <br />
    <asp:Label runat=server ID="labelMsg" />
    </div>
    </form>
    </body>
    <script>
    var btnUpload=document.getElementById("btnUpload");
    var clientTable=document.getElementById("clientTable");
    var uploader=document.getElementById('<%=UploadAttachments1.ClientID %>');
    var buttonTell=document.getElementById('<%=buttonTell.ClientID %>');
    var buttonTellClicked=false;
        function Upload_Click()
        {
    uploader.startupload();
        }
        
        function buttonTell_Click()
        {
    buttonTellClicked=true;
    var items=uploader.getitems();
    for(var i=0;i<items.length;i++)
    {
    switch(items[i].Status)
    {
    case "Queue":
    case "Upload":
    uploader.startupload();
    return false;
    }
    }
    return true;
        }
        
        function CuteWebUI_AjaxUploader_OnPostback()
        {
    if(buttonTellClicked)
    {
    buttonTell.click();
    return false;
    }
        }
        
        function CuteWebUI_AjaxUploader_OnQueueUI(files)
        {
    btnUpload.style.display=files.length>0?"":"none";
    clientTable.style.display=files.length>0?"":"none";
    ShowMyClientTable(files);
    return false;
        }
        
        function ShowMyClientTable(files)
        {
    var map={}
    var newlist=[];
    for(var i=1;i<clientTable.rows.length;i++)
    {
    var row=clientTable.rows.item(i);
    row._scan=false;
    map[row._filekey]=row;
    }
    //update existing row
    for(var i=0;i<files.length;i++)
    {
    var file=files[i];
    var row=map[file.InitGuid||file.FileName];
    if(row==null)
    {
    newlist.push(file);
    continue;
    }
    row._scan=true;
    UpdateToRow(row,file);
    }
    //delete removed row
    for(var i=1;i<clientTable.rows.length;i++)
    {
    var row=clientTable.rows.item(i);
    if(!row._scan)
    {
    clientTable.deleteRow(i);
    i--;
    }
    }
    //add new row:
    for(var i=0;i<newlist.length;i++)
    {
    var file=newlist[i];
    var row=clientTable.insertRow(-1);
    row.insertCell(-1);
    row.insertCell(-1);
    row.insertCell(-1);
    UpdateToRow(row,file);
    }
        }
        function UpdateToRow(row,file)
        {
    row._file=file;
    row._filekey=file.InitGuid||file.FileName;
    if(!row._textbox)
    {
    row._textbox=document.createElement("INPUT");
    row._textbox.type="text";
    row.cells.item(1).appendChild(row._textbox);
    }
    row._textbox.onchange=function()
    {
    file.SetClientData(row._textbox.value);
    }
    row.cells.item(0).innerHTML=file.FileName;
    switch(file.Status)
    {
    case "Queue":
    row.cells.item(2).innerHTML="<a href='#' onclick='CancelQueueItem(this);return false'>remove</a>";
    break;
    case "Finish"://uploaded
    case "Upload"://uploading
    case "Error"://cancelled
    default:
    row.cells.item(2).innerHTML=file.Status;
    break;
    }
        }
        function CancelQueueItem(link)
        {
    var td=link.parentNode;
    var row=td.parentNode;
    var file=row._file;
    file.Cancel();
        }
        
    </script>
    <script type="text/javascript">
    //prevent duplicated items:
        function CuteWebUI_AjaxUploader_OnSelect(files)
        {
    var sames=[];
    var items=uploader.getitems();
    for(var i=0;i<files.length;i++)
    {
    var file=files[i];
    var exists=false;
    for(var j=0;j<items.length;j++)
    {
    var item=items[j];
    if(item.FileName==file.FileName)
    {
    exists=true;
    }
    }
    if(exists)
    {
    sames.push(file.FileName);
    file.Cancel();
    }
    }
    if(sames.length>0)
    {
    alert("These file(s) are already in the queue : \r\n\t"+sames.join('\r\n\t'));
    }
        }
    </script>
    </html>
     
    3)  start the file upload
     
    Use UpdatePanel
     
    Regards,
     
    Ken 
View as RSS news feed in XML