How do I implement multiple upload using Javascript?

[proffy]

Hi,

I have used asp.net file upload control but it can only upload one file at a time and it blocks the UI during upload(synchronous). I however need to upload many files at once. I have not tried the one that comes with Ajax Control toolkit but I got another one. It works fine as in I can browse and choose more than one file at a time. The problem is I can't get access to the files that i choose on the client because the control is an input html control and I can't access it on the server side (C# code behind).

What am I leaving out? Please someone help...
The details are below:

var x = this.Page.FindControl("FileUpload1");

                lbuploadmessage.Text = x.GetType().ToString();

              HttpFileCollection hfc = Request.Files; 
                List<L2SQLData.PatientFile> list = new List<L2SQLData.PatientFile>();
                for (int i = 0; i < hfc.Count; i++)
                {
                    HttpPostedFile hpf = hfc[i];
                    if (hpf.ContentLength > 0 && hpf.ContentLength < 1024000)
                    {
                        string filename = Path.GetFileName(hpf.FileName);
                        string ext = Path.GetExtension(hpf.FileName);
                        var guidname = Guid.NewGuid().ToString();
                        //FileUpload1.SaveAs(Server.MapPath("~/Uploads/DocClerkings/") + guidname + ext);
                    
                        hpf.SaveAs(Server.MapPath("~/Uploads/DocClerkings/") + guidname + ext );
                        lbuploadmessage.Text = "Upload status:" + hpf.FileName + " successfully uploaded!";

As you can see I named the control-"FileUpload1" but at runtime (Debug) the object x is null and Request.Files collection that's supposed to contain the browsed files is empty too. The multi - upload control looks like this:

<input id = "FileUpload1" type="file" class="multi"/>

with two scripts i added as follows:

<script src="jquery-latest.js" type="text/javascript" language="javascript"></script>
<script src="jquery.MultiFile.js" type="text/javascript" language="javascript"></script>

So what did I leave out?

Cheers

[proffy]

Hi guys,
I got the javascript mark-up from this site-http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Uploading. I hope someone can make sense out of this.

The author said:

Make sure your form has method=POST and enctype=multipart/form-data

I am using asp.net forms. How can I ensure this directive he gave is followed or implemented?Thanks

[proffy]

I finally found the missing link at http://docs.jquery.com/Tutorials:Mul...e_Upload_Magic

var fileMax = 3;

$("input[@type=file]").change(function(){
   doIt(this, fileMax);
 });

These lines are all in the designer mark up.On the server side (C# code behind) in the upload button place this:

HttpFileCollection hfc = Request.Files; 
        List<L2SQLData.PatientFile> list = new List<L2SQLData.PatientFile>();
        for (int i = 0; i < hfc.Count; i++)
        {
            HttpPostedFile hpf = hfc[i];
            if (hpf.ContentLength > 0 && hpf.ContentLength < 1024000)
            {
                string filename = Path.GetFileName(hpf.FileName);
                string ext = Path.GetExtension(hpf.FileName);
                var guidname = Guid.NewGuid().ToString();


     hpf.SaveAs(Server.MapPath("~/Uploads/DocClerkings/") + guidname + ext );
     lbuploadmessage.Text = "Upload status:" + hpf.FileName + " successfully uploaded!";

Thanks for the assistance.

[Peterrex]

What do you recommend that we do if we can modify our JavaScript to make our application more testable?