»

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: ,

9 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

Leave a Reply

My Twitter
Team-Integra News
Archives

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