Upload start automatically after selecting an unacceptable file (e.g. larger than limit) even upload mode is set to manual

Last post 05-07-2010, 11:27 AM by Eric. 5 replies.
Sort Posts: Previous Next
  •  05-03-2010, 5:12 PM 60644

    Upload start automatically after selecting an unacceptable file (e.g. larger than limit) even upload mode is set to manual

    Hello and thanks for the excellent control!
     
    We've completely customized the AjaxUploader using JavaScript, but our only remaining problem is that it will begin the upload after an invalid file is selected by user (even though we set the start upload mode to manual).
     
    Also there is no way to prevent an invalid file to be added to the queue, we tried using document.eval(file[index].Cancel); in onSelect method but that didn't work either.
     
    Best Regards,
    Soheil Mokhtari

  •  05-03-2010, 7:06 PM 60647 in reply to 60644

    Re: Upload start automatically after selecting an invalid file (e.g. larger than limit) even upload mode is set to manual

    Soheil,
     
    Can you post some code ?
     
    What is invalid file ?
     
    And how do you control it ?
     
    Regards,
    Terry
  •  05-04-2010, 11:21 AM 60676 in reply to 60647

    Re: Upload start automatically after selecting an invalid file (e.g. larger than limit) even upload mode is set to manual

    Hello and thanks for your reply.
     
    Maybe I didn't make myself clear. Actually by an invalid file I meant an unacceptable file (a file with extension other than those defined in ValidateOption tag or bigger than MaxSizeKB).
     
    Here is the [trimmed version of] code. To simulate my problem add a file,  and then add another file (larger than 512Kb). It will show the error message but will immediately start uploading the files (even though the ManualStart is set to True) (config: IIS7/Win7/IE8)
     
    1. <cutewebui:UploadAttachments runat="server" ID="Attachments1" InsertButtonID="btnAdd"  
    2.     HideNoItemTable="true" AutoUseSystemTempFolder="False" ManualStartUpload="True"  
    3.     TempDirectory="templocation" ShowProgressBar="false"  >  
    4.     <ValidateOption AllowedFileExtensions="*.jpg, *.gif, *.png, *.bmp" MaxSizeKB="512" />  
    5. </cutewebui:UploadAttachments>  
    6. <div class="uploader" style="width: 700px;">  
    7.     <div id="filequeue_div" class="filequeue" style="visibility: collapse;">  
    8.     </div>  
    9.     <input type="button" id="btnAdd" onclick="return CancelAllTasks();" value="Add File(s)"/>  
    10.     <input type="button" id="btnUpload" onclick="return StartUpload()" value="Upload Files" />  
    11.     <input type="button" id="btnCancel" onclick="return CancelAllTasks();" value="Cancel Upload" />  
    12. </div>  
    13.   
    14. <script language="javascript" type="text/javascript">  
    15.   
    16.     var uploader = document.getElementById('<%= Attachments1.ClientID %>');  
    17.     uploader.handlequeueui = QueueUIHandler;  
    18.     var btnAdd = 'btnAdd';  
    19.     var btnUpload = 'btnUpload';  
    20.     var btnCancel = 'btnCancel';  
    21.   
    22.     function QueueUIHandler(list) {  
    23.   
    24.         if (list.length < 1) {  
    25.             var container = document.getElementById('filequeue_div');  
    26.             container.innerHTML = '';  
    27.             container.style.visibility = 'collapse';  
    28.         }  
    29.         else {  
    30.             var container = document.getElementById('filequeue_div');  
    31.             container.style.visibility = 'visible';  
    32.             var table = document.getElementById('uplistable');  
    33.   
    34.             if (table == null) {  
    35.                 container.innerHTML = '';  
    36.   
    37.                 table = document.createElement('table');  
    38.                 table.id = 'uplistable';  
    39.                 tablehead = document.createElement('thead');  
    40.                 var row = tablehead.insertRow(-1);  
    41.                 row.insertCell(-1).innerHTML = 'Filename';  
    42.                 table.appendChild(tablehead)  
    43.                 tablebody = document.createElement('tbody');  
    44.   
    45.                 for (var i = 0; i < list.length; i++) {  
    46.                     var name = list[i].FileName  
    47.                     var row = tablebody.insertRow(-1);  
    48.                     row.insertCell(-1).innerHTML = name;  
    49.                 }  
    50.                 table.appendChild(tablebody);  
    51.   
    52.                 container.appendChild(table);  
    53.             }  
    54.         }  
    55.         return false//hide the default;  
    56.     }  
    57.   
    58.     function CuteWebUI_AjaxUploader_OnPostback() {  
    59.         return false;  
    60.     }  
    61.   
    62.     function CuteWebUI_AjaxUploader_OnStart() {  
    63.         alert('started');  
    64.         //return false;  
    65.     }  
    66. </script> 
     
  •  05-04-2010, 8:19 PM 60691 in reply to 60676

    Re: Upload start automatically after selecting an invalid file (e.g. larger than limit) even upload mode is set to manual

    Hi,
     
    I have confirmed that is a bug.
     
    We will fix it today.
     
    Regards,
    Terry
  •  05-07-2010, 9:51 AM 60805 in reply to 60691

    Re: Upload start automatically after selecting an invalid file (e.g. larger than limit) even upload mode is set to manual

    Thanks a lot, it is solved now.
     
    Also there is another issue, in the manual mode the CuteWebUI_AjaxUploader_OnStop method only fires when user clicks the cancel button and not after the uploads are finished. However we found a work around for it for now.
     
    Regards,
    Soheil Mokhtari
  •  05-07-2010, 11:27 AM 60809 in reply to 60805

    Re: Upload start automatically after selecting an invalid file (e.g. larger than limit) even upload mode is set to manual

    When you click "Cancel" or "Cancel All", CuteWebUI_AjaxUploader_OnStop  will be called, you can use the following examples to test it: 
     <%@ Page Language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">
        void InsertMsg(string msg)
        {
            ListBoxEvents.Items.Insert(0, msg);
            ListBoxEvents.SelectedIndex = 0;
        }
        void Attachments1_AttachmentAdded(object sender, AttachmentItemEventArgs args)
        {
            InsertMsg(args.Item.FileName + " has been uploaded.");
        }
        void ButtonDeleteAll_Click(object sender, EventArgs e)
        {
            InsertMsg("Attachments1.DeleteAllAttachments();");
            Attachments1.DeleteAllAttachments();
        }
        void ButtonTellme_Click(object sender, EventArgs e)
        {
            ListBoxEvents.Items.Clear();
            foreach (AttachmentItem item in Attachments1.Items)
            {
                InsertMsg(item.FileName + ", " + item.FileSize + " bytes.");
                //Copies the uploaded file to a new location.
                //item.CopyTo("c:\\temp\\"+item.FileName);
                //You can also open the uploaded file's data stream.
                //System.IO.Stream data = item.OpenStream();
            }
        }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Uploading multiple files like GMail</title>
        <link rel="stylesheet" href="demo.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
            <div class="content">
                <h2>
                    Uploading multiple files like GMail</h2>
                <p>
                    Google's GMail has a nice way of allowing you to upload multiple files. Rather than
                    showing you 10 file upload boxes at once, the user attaches a file, you can click
                    a button to add another attachment.
                </p>
                <br />
                <CuteWebUI:UploadAttachments InsertText="Upload Multiple files Now" runat="server"
                    ID="Attachments1" MultipleFilesUpload="true" OnAttachmentAdded="Attachments1_AttachmentAdded">
                    <InsertButtonStyle />
                </CuteWebUI:UploadAttachments>
                <br />
                <br />
                <asp:Button ID="ButtonDeleteAll" runat="server" Text="Delete All" OnClick="ButtonDeleteAll_Click" />&nbsp;&nbsp;
                <asp:Button ID="ButtonTellme" runat="server" Text="Show Uploaded File Information"
                    OnClick="ButtonTellme_Click" />
                <br />
                <br />
                <div>
                    Server Trace:
                    <br />
                    <asp:ListBox runat="server" ID="ListBoxEvents" Width="400"></asp:ListBox>
                </div>
            </div>
    <script type="text/javascript">
        //Fires when an Ajax Uploader is fully initialized
    function CuteWebUI_AjaxUploader_OnInitialize()
    {
        alert("CuteWebUI_AjaxUploader_OnInitialize is called");
        var hidden=this;
        //warning , using the internalobject is not recommend .
        //if you use it, you need test the uploader again for each new version.
        var arr=[];
        for(var p in hidden.internalobject)
        {
           arr.push(p);
        }
        alert("internal object member list : "+arr);
    }
    //Fires when an upload of a specific file has started
    function CuteWebUI_AjaxUploader_OnStart()
    {
      alert("CuteWebUI_AjaxUploader_OnStart is called");  
    }
    //Fires when upload is stopped and not do postback
    function CuteWebUI_AjaxUploader_OnStop()
    {
      alert("CuteWebUI_AjaxUploader_OnStop is called"); 
    }
    //Fires before the page do PostBack to server side and fire the FileUploaded event.
    function CuteWebUI_AjaxUploader_OnPostback()
    {
      alert("CuteWebUI_AjaxUploader_OnPostback is called");  
    }
    //Fires when the upload button is clicked.
    function CuteWebUI_AjaxUploader_OnBrowse()
    {
      alert("CuteWebUI_AjaxUploader_OnBrowse is called");
        //return false to cancel it..
    }
    //Fires when files are selected.
    function CuteWebUI_AjaxUploader_OnSelect(files)
    {
      alert("CuteWebUI_AjaxUploader_OnSelect is called");
        //change the files array would take no effect.
        var name=files[0].FileName;
        var size=files[0].FileSize // (or -1)
        //return false to cancel it..
    }
    //Fires when new information about the upload progress for a specific file is available.
    function CuteWebUI_AjaxUploader_OnProgress(enable,filename,begintime,uploadedsize,totalsize)
    {
      alert("CuteWebUI_AjaxUploader_OnProgress is called");  
    }

    //Fires when the upload queue table is available.

    function CuteWebUI_AjaxUploader_OnQueueUI(list)
    {
      alert("CuteWebUI_AjaxUploader_OnQueueUI is called");
        var name=list[0].FileName
        var size=list[0].FileSize // (or -1)
        var stat=list[0].Status // Finish|Error|Upload|Queue
        var func=list[0].Cancel;
    }   
        </script>
      </form>
    </body>
    </html>
     
    Regards,
    Eric
View as RSS news feed in XML