»

jQuery Multiple File Upload Plugin + ASP.NET Example

March 4th, 2009 | Author: MorningZ

So musing around the internet for an ASP.NET example of using this excellent multiple file plugin, I couldn’t find a good simple example to work off, so I spent the half hour and did it myself and thought I’d share….

So let’s get right to the point, let me show the code!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
    Dim AllowedFileTypes As Dictionary(Of String, String)
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs)
        AllowedFileTypes = New Dictionary(Of String, String)
        AllowedFileTypes.Add("gif", "image/gif")
        AllowedFileTypes.Add("jpg", "image/jpeg,image/jpeg,image/pjpeg")
        AllowedFileTypes.Add("png", "image/png")
        AllowedFileTypes.Add("zip", _
               "application/octet-stream,application/x-zip-compressed")
        AllowedFileTypes.Add("rar", "application/octet-stream")
        AllowedFileTypes.Add("html", "text/html")
        AllowedFileTypes.Add("htm", "text/html")
        AllowedFileTypes.Add("txt", "text/plain")
        AllowedFileTypes.Add("js", "text/javascript")
        AllowedFileTypes.Add("css", "text/css")
    End Sub
 
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        Message.InnerHtml = String.Empty
        Dim FileInputClass As String = String.Empty
        For Each FileType As String In AllowedFileTypes.Keys
            FileInputClass &= String.Concat(FileType, "|")
        Next
        If Not String.IsNullOrEmpty(FileInputClass) Then
            File1.Attributes.Add("accept", _
                  FileInputClass.Substring(0, FileInputClass.Length - 1))
        End If
    End Sub
 
    Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        'Make sure Windows User "NETWORK SERVICE" has write permissions!
        Dim SaveFolder As String = "C:\Temp\Uploads\"  
 
        Message.InnerHtml = String.Empty
 
        Dim AllFiles As HttpFileCollection = Request.Files
        Dim ThisFile As HttpPostedFile, ValidType As Boolean, ThisFileName As String
        For i As Int32 = 0 To (AllFiles.Count - 1)
            ThisFile = AllFiles.Get(i)
            If ThisFile.ContentLength > 0 Then
                ThisFileName = IO.Path.GetFileName(ThisFile.FileName)
                ValidType = False
                For Each FileTypeList As String In AllowedFileTypes.Values()
                    For Each FileType As String In FileTypeList.Split(CChar(","))
                        If FileType.ToLower().Equals(ThisFile.ContentType.ToLower()) Then
                            ValidType = True
                            Exit For
                        End If
                    Next
                    If (ValidType = True) Then Exit For
                Next
                If ValidType = True Then
                    Try
                        ThisFile.SaveAs(String.Concat(SaveFolder, ThisFileName))
                        Message.InnerHtml &= _
                            String.Format("{0} saved<br />", ThisFileName)
                    Catch ex As Exception
                        Message.InnerHtml &= _
                            String.Format("{0}: <b>{1}</b><br /> _
                            ThisFileName, ex.Message)
                    End Try
                Else
                    Message.InnerHtml &= _
                         String.Format("<b>{0}: Invalid File Type of {1}</b><br />", _
                         ThisFileName, ThisFile.ContentType)
                End If
            End If
 
        Next
 
    End Sub
 
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs)
        Message.Visible = Not String.IsNullOrEmpty(Message.InnerHtml)
    End Sub
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Multi Upload with ASP.NET</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.fyneworks.com/jquery/multiple-file-upload/jquery.blockUI.js" type="text/javascript"></script>
    <script src="http://jquery-multifile-plugin.googlecode.com/svn/trunk/jquery.MultiFile.js" type="text/javascript"></script>
    <script src="http://www.fyneworks.com/jquery/multiple-file-upload/jquery.MetaData.js" type="text/javascript"></script>
    <style type="text/css">
    body {
        font-size: 10px; font-family: Verdana;
    }
    #Link {
        padding-bottom: 10px;
    }
    #Message {
        padding: 4px; background-color: #dadada; border: solid 1px red;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server" enctype="multipart/form-data">
        <div>
            <div id="Link">And example of using the jQuery plugin <a href="http://www.fyneworks.com/jquery/multiple-file-upload/" target="_blank">"jQuery Multiple File Upload Plugin"</a> with ASP.NET</div>
            <div id="Message" runat="server" visible="false"></div>
            <div><input id="File1" type="file" name="File1" runat="server" class="multi" /></div>
            <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
        </div>
    </form>
</body>
</html>

The MIME stuff is tricky as different browsers use different types for certain file types, for example, zip files uploaded via FireFox are “octet-stream” and IE uses “application/x-zip-compressed”…

Anyways, hopefully this helps give you an idea of what to start with if you want to give your site users the ability to upload multiple files at once in your ASP.NET application

Posted in Programming | Tags: ,

14 Responses to “jQuery Multiple File Upload Plugin + ASP.NET Example”

  • prashanth:
    July 3, 2009 at 5:18 am

    Hello,
    I tried to test it by converting the code to c# but i am getting error on

    ThisFile = AllFiles.Get(i);

    cannot use local variable so if possible please give the code in c# which is tested and running.

    Thanks and Regards,
    Prashanth Kumar G.

  • MorningZ:
    July 3, 2009 at 8:13 am

    “but i am getting error”

    Without knowing the error, it makes it really hard to help

  • prashanth:
    July 6, 2009 at 12:36 am

    Hello,
    is it possible to send the working code in c#. Even most of the vb to c# are not working for this code conversion. Your c# code will be a great help.

    Thanks

  • Jhone:
    July 14, 2009 at 6:18 am

    Thanks! Good post.

  • Adam:
    July 18, 2009 at 4:50 am

    Great thanks for the post, it helped me loads!

  • fabio:
    November 18, 2009 at 12:27 pm

    Great post, thanks very much this help me a lot on developing a multifile upload in .net

  • CloudDenzel:
    January 20, 2010 at 10:21 pm

    Thanks for the post, make me easier to upload more image files.

  • CloudDenzel:
    January 20, 2010 at 10:26 pm

    ill try to test and i have notice that when i upload more image files and each size of the image is about 2-3 mb, and when i click the upload button they wont save to the folder i created and definitely save it. why is that happen? is there anything i set to the webconfig?

  • MorningZ:
    January 20, 2010 at 11:47 pm

    I have no idea… all the code I posted above works perfectly fine for me…. but i haven’t tried to upload that much at once

  • Borfalon Elefal III:
    May 18, 2010 at 8:59 am

    It seems to be impossible that somebody using C# doesn’t know which is the correct translation of VB sentence:

    ThisFile = AllFiles.Get(i);

    But for those of you who are not able to translate it to C#… here is the answer:

    ThisFile = AllFiles[i];

    And for those who can’t upload more than 4MB at once (or several files that exceed that size in total)… try googling a little more and you will see that the only thing you have to do is to raise de maximum request length (maxRequestLength parameter in web.config)

  • shri:
    May 19, 2010 at 9:50 am

    he hi its very nice script.
    i want to know how to increase speed of uploading.

  • MorningZ:
    May 19, 2010 at 11:11 am

    the code has absolutely *zero* to do with “speed”.. that is something between your computer, your connection to the internet, and the remote server…..

    there is nothing you can do from a coding standpoint to affect that one single bit

  • Crusader:
    June 9, 2010 at 1:36 am

    hi
    Im using this plugin. it works fine for insert mode.
    but i want to use this in edit mode also.
    How can i do that?
    i need to show the already uploaded files in database using this plugin?
    Please help me out!!!

    Thanks Ahead !!!…

  • MorningZ:
    June 9, 2010 at 9:11 am

    Hey man.. my code posted up is what it is…. you need database interaction and edit ability.. you’re on your own

    This post is about using that plugin and handling the files in .NET, nothing else

Leave a Reply

My Twitter
Team-Integra News
Archives

Contact Us | Terms of Use | Trademarks | Privacy Statement
Copyright © 2009 MorningZ. All Rights Reserved.