2009 March

jQuery Multiple File Upload Plugin + ASP.NET Example

March 4th, 2009 |

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!!

<%@ 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: ASP.NET, jQuery |

14 Comments »

Archive for March, 2009

jQuery Multiple File Upload Plugin + ASP.NET Example