Avoid reload after UploadCompleted

Last post 02-19-2014, 1:44 PM by prueba2387. 7 replies.
Sort Posts: Previous Next
  •  02-17-2014, 7:33 AM 79932

    Avoid reload after UploadCompleted

     Hi,

     

    I want to avoid reloading the page after all files have been uploaded.

    I have tried UploadAttachments1.GetItemsTable().Visible = False on Page_Load event, but no luck.

     

    Any help appreciated. Thanks 

  •  02-17-2014, 7:53 AM 79933 in reply to 79932

    Re: Avoid reload after UploadCompleted

    Hi,

     

    If you want to avoid the page postback, I suggest you use it with the ajax UpdatePanel control.

     

    If you want to hide the uploader after uploaded, please try the way below.

     

    1. <%@ Page Language="C#" AutoEventWireup="True" %>  
    2.   
    3. <%@ Register Assembly="CuteWebUI.AjaxUploader" Namespace="CuteWebUI" TagPrefix="ajaxuploader" %>  
    4. <html>  
    5. <head>  
    6.     <script runat="server">  
    7.         protected void uploader1_UploadCompleted(object sender, UploaderEventArgs[] args)  
    8.         {  
    9.             panel1.Visible = false;  
    10.         }  
    11.     </script>  
    12. </head>  
    13. <body>  
    14.     <form id="Form1" runat="server">  
    15.         <asp:Panel ID="panel1" runat="server">  
    16.             <CuteWebUI:UploadAttachments ID="uploader1" runat="server" OnUploadCompleted="uploader1_UploadCompleted"></CuteWebUI:UploadAttachments>  
    17.         </asp:Panel>  
    18.   
    19.     </form>  
    20. </body>  
    21. </html>  
     

    Regards,

     

    Ken 

  •  02-17-2014, 8:04 AM 79936 in reply to 79933

    Re: Avoid reload after UploadCompleted

    Hi Ken,

     

    Thanks for replying so soon.

     

    1. I'm already using it inside an UpdatePanel, but this does not avoid the panel from being reloaded.

    I know it because I'm using an UpdateProgress too, which is being fired. And the real problem, I can post the form until the reload ends.

     

    2. No, I don't want to hide the uploader after uploaded.

     

    Thanks again 

  •  02-18-2014, 8:14 AM 79938 in reply to 79936

    Re: Avoid reload after UploadCompleted

    hi,

     

    1.  you can hide the submit button by default, then show it after uploaded. so the user can not post the form until the upload success.

     

    2. Can you explain your requirement in detail?

     

    Regards,

     

    Ken 

  •  02-18-2014, 10:54 AM 79942 in reply to 79938

    Re: Avoid reload after UploadCompleted

     Hello,

     

    I can hide the submit button, of course. May be I did not explain myself clearly:

     

    I select a file to upload and press ok.

    The progress bar gets to the end.

    Right now, a postback is automatically fired which creates the queue table. I want to avoid this postback.

     

    I tried this too, but no luck:

    <script type="text/javascript">

    function CuteWebUI_AjaxUploader_OnQueueUI(items)

    {

            return false;
    }

    </script>

     

    Anyway, never mind. I think I'll stick with it as it seems difficult to solve.

     

    ----------------------------------------------------------------------------

     

    I got another problem much harder:

     

    I have already uploaded files, which are stored in a database.

    Users must be able to delete them and also upload new ones at the same time.

    So I use an UploadAttachments control to give users the chance to upload new ones, and at the same time display saved ones using AddCustomAttachment method. I also use SetCustomData upon the control's last item in order to store required info.

     

    1. No file info displayed (Size, Name).

    2. After a new file is uploaded. Somehow old and new items get mixed, and I finish getting saved item's info on new ones.

    3. Where are the Advanced Samples? I can not find them in the Class Library.

    Is what I intend possible?

     

    Thanks so much 

  •  02-19-2014, 8:27 AM 79945 in reply to 79942

    Re: Avoid reload after UploadCompleted

    Hi,

     

    Below is the example which shows you how to use SetCustomData to get the addition info of the upload file which fill by user.

     

    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-19-2014, 1:17 PM 79947 in reply to 79945

    Delete from disk programatically added AttachmentItem

    Hi Ken,

     

    In the end I have come with an embarrasingly simple solution:

     

    UploadAttachments.Items.Add method + AttachmentItem.ClientData property

     

    The simplest, the best.

     

    However, I have a problem when trying to remove from disk an attachment added this way. The file is being used by another process is throwed. I guess the stream used to read it must be closed first, but I don't know where.

    Is there a way to achieve that?

  •  02-19-2014, 1:44 PM 79948 in reply to 79947

    Re: Delete from disk programatically added AttachmentItem

     I found it:

     

    Using fs As FileStream = File.OpenRead(path)

       UploadAttachment1.Items.Add(filesize, filename, fs)

    End Using

     

View as RSS news feed in XML