How to use the Ajax Uploader in Grid

Last post 08-06-2010, 12:23 PM by Eric. 4 replies.
Sort Posts: Previous Next
  •  08-02-2010, 10:41 AM 62939

    How to use the Ajax Uploader in Grid

    Hi.!

                This tool (Ajax Uploader 2.0) is very beautiful to use. It is working fine when it used as separate control but in my case, I need to use this ajax uploader in EACH row of grid. And I need to upload the selected files AFTER each of my grid row gets saved. Can u please help on this? Based on this I can push my management to purchase the tool.

    Thanks in advance!

    Have a great time!

  •  08-02-2010, 8:18 PM 62968 in reply to 62939

    Re: How to use the Ajax Uploader in Grid

    Hi,
     
    You need attach the FileUploaded event , use tag code <CuteWebUI:Uploader FileUploaded="...." /> , or in the grid Item Init event.
     
    And then , in the Uploader_FileUploaded(object sender,..) event, you can get  the uploader by this way :
     
    Uploader uploader=(Uploader)sender;
     
    And then get the grid item , and index by this way :
     
    int index=-1;
    for(Control c=uploader.Parent;c!=null;c=c.Parent)
    {
       GridViewRow item=c as GridViewRow;
       if(item!=null)
       {
          index=item.DataItemIndex;
          break;
       }
    }
    object datakey=GridView1.DataKeys[index];
     
    and then , save the files for the object which datakey means
     
    Regards,
    Terry
     
  •  08-03-2010, 9:33 AM 63021 in reply to 62968

    Re: How to use the Ajax Uploader in Grid

    Hi!
     
    First of all i need to say thanks for reply  to my post. The code which u gave is working fine and finally i achieved what i want. Thanks again.
     
     
    Thank you!
    Have a great time!
    By
    Ram Kumar 
  •  08-06-2010, 10:39 AM 63185 in reply to 62968

    Re: How to use the Ajax Uploader in Grid

    Hi Terry!
     
       I have two more questions in ajax uploader. 
          1. How can I redirect the page ( int he function "Uploader_FileUpload()") once all the files gets uploaded. 
          2. When I click on submit how can I find whether user has selected file in the control?. Based on that I need to flash the message to the user.  Please note I wont be able to use required validator for this purpose, i have to check it in the Javascript. Kindly  advise.
     
    Thank You,
    By
    Ram Kumar 
  •  08-06-2010, 12:23 PM 63192 in reply to 63185

    Re: How to use the Ajax Uploader in Grid

    Please refer to:
    <%@ 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 SubmitButton_Click(object sender, EventArgs e)
        {
            InsertMsg("You clicked the Submit Button.");
            InsertMsg("You have uploaded " + uploadcount + "/" + Uploader1.Items.Count + " files.");
        }

        int uploadcount = 0;

        void Uploader_FileUploaded(object sender, UploaderEventArgs args)
        {
            uploadcount++;

            Uploader uploader = (Uploader)sender;
            InsertMsg("File uploaded! " + args.FileName + ", " + args.FileSize + " bytes.");
            //Copys the uploaded file to a new location.
            //args.CopyTo(path);
            //You can also open the uploaded file's data stream.
            //System.IO.Stream data = args.OpenStream();
            Response.Redirect("http://www.google.com");
        }
        protected override void OnPreRender(EventArgs e)
        {
            SubmitButton.Attributes["itemcount"] = Uploader1.Items.Count.ToString();
            base.OnPreRender(e);
        }
     
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Start uploading manually</title>
        <link rel="stylesheet" href="demo.css" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div class="content">
            <h2>
                Start uploading manually</h2>
            <p>
                This sample demonstrates how to start uploading manually after file selection vs
                automatically.</p>
            <CuteWebUI:UploadAttachments runat="server" ManualStartUpload="true" ID="Uploader1"
                InsertText="Browse Files (Max 1M)" OnFileUploaded="Uploader_FileUploaded">
                <ValidateOption MaxSizeKB="1024" />
            </CuteWebUI:UploadAttachments>
            <br />
            <br />
            <asp:Button runat="server" ID="SubmitButton" OnClientClick="return submitbutton_click()"
                Text="Submit" OnClick="SubmitButton_Click" />
            <br />
            <br />
            <div>
                <asp:ListBox runat="server" ID="ListBoxEvents" Width="400"></asp:ListBox>
            </div>

            <script type="text/javascript">

                function submitbutton_click() {
                    var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
                    var uploadobj = document.getElementById('<%=Uploader1.ClientID %>');
                    if (!window.filesuploaded) {
                        if (uploadobj.getqueuecount() > 0) {
                            uploadobj.startupload();
                        }
                        else {
                            var uploadedcount = parseInt(submitbutton.getAttribute("itemcount")) || 0;
                            if (uploadedcount > 0) {
                                return true;
                            }
                            alert("Please browse files for upload");
                        }
                        return false;
                    }
                    window.filesuploaded = false;
                    return true;
                }
                function CuteWebUI_AjaxUploader_OnPostback() {
                    window.filesuploaded = true;
                    var submitbutton = document.getElementById('<%=SubmitButton.ClientID %>');
                    submitbutton.click();
                    return false;
                }
                function CuteWebUI_AjaxUploader_OnSelect(files) {
                    alert(files.length);   
                    //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..
                }
            </script>
        </div>
        </form>
    </body>
    </html>
    Regards,
    Eric

View as RSS news feed in XML