CODEWITHSUNDEEP
asp.netjqueryasp.net-mvcajaxfile-upload
Banshee
Banshee

Reputation: 15807

Multiple fileuploads with ASP.NET MVC

Hi,

I have implemented this plugin by Steve Sanders from 2008. In my solution I have 3 buttons for 3 uploads and this works just fine. But ist not a perfect fit and the question is if thera is a better solution for me?

What I need is :

  1. Be able to upload multiple files
  2. When the Control Action is triggered It should be possible to work with the files
  3. The enduser should be able to cancel a uploaded file(this is not possible with Steves plugin as far as I know)
  4. Easy to use with ASP.NET MVC
  5. If a post is done to the Control Action and a validation error is thrown back the uploads may not disappear.

Pleas Advice

Upvotes: 0

Views: 721

Answers (4)

Todd Smith
Todd Smith

Reputation: 17272

Under the hood the Steve Sanders' plugin uses swfUpload which can support everything you need. His plugin however does not seem to expose all of the features of swfUpload such as canceling uploads.

I use swfUpload to it's full extent on my sites supporting multiple files, canceling uploads, validation without canceling other uploads, etc.

Here's a demo of swfUpload in action where you can cancel uploads

Upvotes: 2

Stefan Steiger
Stefan Steiger

Reputation: 82136

It's not possible with pure ASP.NET.

You need to take JQuery uploadify. It's the best you can find, trust me, I tried for an entire day.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="MassUpload.aspx.vb" Inherits="Raumplaner_New.MassUpload" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Mass Upload</title>


    <link href="../upload/css/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../scripts/swfobject.js"></script>
    <script type="text/javascript" src="../scripts/jquery.uploadify.v2.1.0.min.js"></script> 

<script type = "text/javascript">

    $(document).ready( function() 
    { 
        $("#<%=FileUpload1.ClientID%>").uploadify({     
        'uploader'       : '../upload/scripts/uploadify.swf',
        'script'         : '../cgi-bin/Upload.ashx',
        'cancelImg'      : '../upload/images/cancel.png',
        'folder'         : '../upload/temp',
        'buttonImg'      : '../upload/images/uploadbutton.png',
        'width'          : '97',
        'height'         : '22',
        'wmode'          : 'transparent',
        'displayData'    : 'speed', 
        'multi'          : true,
        'auto'           : true,
        'simUploadLimit' : 20,  
        'fileDesc'       : 'DWG und SWF - Dateien',
        'fileExt'        : '*.dwg;*.swf',
        'onSelect'       : function(event, queueID, fileObj){ EnableObject('FileUpload1');},
        'onCancel'       : function(event, queueID, fileObj, data){DisableObject('FileUpload1');},
        'onComplete'     : function(event,queueID,fileObj,response,data){alert(fileObj.name);}
        });


        $("#startUploadLink").click( function()
        {           
            $('#<%=FileUpload1.ClientID%>').uploadifyUpload();
            return false;
        });

        $("#clearQueueLink").click( function()
        {
            $("#<%=FileUpload1.ClientID%>").uploadifyClearQueue();                          
            return false;           
        }); 

    });
</script> 


</head>
<body style='background:black;'>
<div id='main'>
        <form id="form1" runat="server">
            <br/>
            <div class="demo">

                <asp:FileUpload ID="FileUpload1" runat="server" />
                <br />
                <a href="#" id="startUploadLink">Start Upload</a>&nbsp; |&nbsp;
                <a href="#" id="clearQueueLink">Clear</a> 

            </div>

        </form>
</div>
</body>
</html>

And here's upload.ashx <%@ WebHandler Language="VB" Class="Upload" %>

Imports System
Imports System.Web

Public Class Upload : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim postedFile As HttpPostedFile = context.Request.Files("Filedata")

        Dim savepath As String = ""
        Dim tempPath As String = ""
        tempPath = context.Request("folder")

        'If you prefer to use web.config for folder path, uncomment below:
        'tempPath = System.Configuration.ConfigurationManager.AppSettings("FolderPath")


        savepath = context.Server.MapPath(tempPath)
        Dim filename As String = postedFile.FileName
        If Not System.IO.Directory.Exists(savepath) Then
            System.IO.Directory.CreateDirectory(savepath)
        End If

        postedFile.SaveAs((savepath & "\") + filename)    
        context.Response.Write((tempPath & "/") + filename)
        context.Response.StatusCode = 200
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property

End Class

Upvotes: 1

Marko
Marko

Reputation: 72222

Another option is SlickUpload.

It's not free but definitely worth it in my opinion. I used it in an MVC project recently and was extremely happy with it. Best upload plugin I've ever used + it comes with all sorts of validation helpers.

It's fully customizable too.

Download the trial and have a look for yourself :)

Upvotes: 1

rsenna
rsenna

Reputation: 11964

How about using Uploadify? I have used it before, and it works great. But do notice that it also needs a Flash front-end in order to work...

Take a look at this StackOverflow question - there you'll find more info of how to use it with ASP.NET MVC.

Upvotes: 2

Related Questions