0

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

Banshee
  • 15,434
  • 36
  • 111
  • 198

4 Answers4

2

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.

Community
  • 1
  • 1
rsenna
  • 10,960
  • 1
  • 50
  • 60
  • This looks grate, but will it run from smarthphones that do not suport flash? – Banshee Jan 26 '11 at 07:14
  • No, it probably won't. You should have added that requirement to your question though... And keep in mind that a javascript-only solution would be very [limited](http://stackoverflow.com/questions/1372712/is-robust-javascript-only-upload-of-file-possible) (that would be the only way to work from a smartphone). In fact, what you should do is give all options: flash for rich clients, javascript-only for smartphones/limited browsers, and a regular input file for clients with javascript disabled. That can be done using javascript and the ` – rsenna Jan 26 '11 at 12:23
2

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

Todd Smith
  • 16,314
  • 11
  • 53
  • 76
  • Thanks but this example do only offer cancelation during upload and this does Steve´s plugin already suport. Yes I am awear of that the plugin could be changed to fit my application but Im not that grate on the Jquery. Have you compared swfUpload and Uploadify? Its important that the end result will be usable by as many clients as possible. It would be grate if it also worked from smartphones where flash is not working. – Banshee Jan 26 '11 at 07:13
1

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

Marko
  • 68,081
  • 26
  • 118
  • 153
1

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
Stefan Steiger
  • 68,404
  • 63
  • 337
  • 408
  • Thanks for the sample, it seemse like JQuery uploadify is a popular. But how will it run from a smartphone that does not suport flash? – Banshee Jan 26 '11 at 07:17
  • It will run on Android & AndroidTablet, which supports Flash, but bad luck with the iPhone & iPad. Anyway, in case of ios or ipad in the useragent-string, just use a conventional upload control. There's not much you can do, HTML5 & webkit are no subsitute for Flash. – Stefan Steiger Jan 26 '11 at 10:07
  • I've seen once a PHP/HTML/JavaScript + iFrame combination, but I wasn't able to translate the PHP part to ASP.NET, I guess because PHP is async vs. ASP.NET, which is sync. – Stefan Steiger Jan 26 '11 at 10:11