ASP.net - Multiple Upload with jQuery Multiple File Upload Plugin
Asked Answered
L

4

14

I know how to upload with ASP.net's FileUpload control.

What I want to do is use this jQuery Multiple File Upload Plugin to upload multiple files.

Here is exactly what it does when multiple files are selected for upload:

<input type="file class="multi MultiFile" id="MultiFile1_F3" name="file1[]" style="position: absolute; top: -3000px;">

But I cannot figure out how to manipulate these files from asp.net. I have tried using Request.Files as the following link instructs: ASP.Net Upload of multiple files after choosing them from jQuery

That doesn't work. I think that only works for controls marked with runat="server" at compile time.

Does anyone know how to do this? Maybe something in Request.Form...?

Thanks for your help!

Liberality answered 18/2, 2009 at 20:31 Comment(2)
I think it's funny that this question was viewed 1500 times and no one voted it up.Liberality
Too ASP.net specific for me. I was looking for "multiple file upload jquery" reallyUninhibited
S
2

It's been a bit since I did that kind of thing in .NET, but once you begin cloning form inputs dynamically, I think you have to go out to Request.Form and find the submitted values manually. I wrote up the jQuery code to clone some (non-file) inputs with sequential identifiers here. As long as you have unique identifiers, you can run a loop to see if Request.Form["MultiFile1_F" + counter] exists and go from there.

Seabrooke answered 18/2, 2009 at 20:38 Comment(3)
The problem with this is that Request.Form["MultiFile1_FN"] returns a string. This sort of thing works great with regular HTML text boxes.Liberality
Ah, duh. What's the length of Request.Files when you send x # of files up?Seabrooke
length of Request.Files is Zero.Liberality
A
5

Two things to check:

  • Make sure your form has the enctype="multipart/form-data" attribute set. This is required to enable uploads.
  • Make sure all file inputs have both id and name attributes set. For some reason, if you don't set both, wierd things happen.

Also, runat="server" shouldn't have anything to do with whether Request.Files works or not -- this is more an issue of the browser actually posting the files.

Anticatalyst answered 20/2, 2009 at 0:55 Comment(2)
I checked both of those things, and that did not help.Liberality
This worked for me - my file input element didn't have a name or id - bizarre! Thanks Chris!Nabob
L
5

This jQuery plugin was giving every generated input control the exact same name attribute.

For this reason, the files were not posting.

I built my own javascript solution.

I will post a link to the code in a comment.

Edit

I revisited this and found that what I was trying to do wasn't very difficult at all. I got the the jquery multiple file upload plugin to work fine with my aspx form. I don't know why I was having so much trouble before.

1.) Include the jQuery library on the web form:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" />

2.) Reference the multiple file plugin on the web form (Download it here):

<script src="jquery.MultiFile.pack.js" type="text/javascript">

3.) Add a file input on your web form with class="multi":

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

4.) Execute some code or call a method like this on form submission:

    void SendMail(string from, string to, string subject, string body, string smtpServer)
    {
        // create mail message
        MailMessage mail = new MailMessage(from, to, subject, body);

        // attach posted files
        for (int i = 0; i < Request.Files.Count; i++)
        {
            HttpPostedFile file = Request.Files[i];
            mail.Attachments.Add(new Attachment(file.InputStream, file.FileName));
        }

        //send email
        new SmtpClient(smtpServer).Send(mail);
    }

This is all that I had to do to attach multiple files to an email sent from an aspx page.

If you want to increase the total size of the files that can be uploaded, add this to your web.config file:

<system.web>
    <httpRuntime executionTimeout="240" maxRequestLength="30720"/>
</system.web>

The executionTimeout is measured in seconds and maxRequestLength is measured in kilobytes. In this example, the request will timeout after 4 minutes and will allow a 30mb request.

Liberality answered 20/2, 2009 at 20:13 Comment(1)
I still only get 1 file the only difference is my j query version is higher?Unconsidered
S
2

It's been a bit since I did that kind of thing in .NET, but once you begin cloning form inputs dynamically, I think you have to go out to Request.Form and find the submitted values manually. I wrote up the jQuery code to clone some (non-file) inputs with sequential identifiers here. As long as you have unique identifiers, you can run a loop to see if Request.Form["MultiFile1_F" + counter] exists and go from there.

Seabrooke answered 18/2, 2009 at 20:38 Comment(3)
The problem with this is that Request.Form["MultiFile1_FN"] returns a string. This sort of thing works great with regular HTML text boxes.Liberality
Ah, duh. What's the length of Request.Files when you send x # of files up?Seabrooke
length of Request.Files is Zero.Liberality
B
2

I highly recommend Uploadify as a mulitple file uploader. It uses jquery and flash to allow the user to upload multiple files at once through ctrl + clicking on all desired files. It then displays a queue of the files uploading and removes the file from the queue on completion. It also allows you to specify which extension to allow the user to upload as well which prevents you from having to do extension validation.

EDIT:
If you dont want to use flash Ajax Upload works really well too. If users on my site company's site dont have the right version of flash that works best with uploadify, I switch to Ajax Upload. They both work very well for me.

Bauxite answered 22/12, 2009 at 21:57 Comment(2)
As far as I know, Flash uploaders suffer from a bug which sends persistent cookies from IE to the upload URL instead of the cookies from the browser. This can break framework features such as, asp.net's forms authentication mechanism.Liberality
yeah but there are several workarounds for this bug which have been mentioned in several of the other 'fileuploader' questions on stackoverflowBauxite

© 2022 - 2024 — McMap. All rights reserved.