Can you recommend alternative FileUpload control for asp.net-mvc?

StackOverflow https://stackoverflow.com/questions/253642

Question

Currently using System.Web.UI.WebControls.FileUpload wrapped in our own control.

We have licenses for Telerik. I wanted to know if anyone had experience with that or could suggest a better one?

Some criteria to be measured by

  • validation
  • peformance
  • multiple files
  • localisation (browse is difficult)
  • security
Was it helpful?

Solution

Personally, if you have the Telerik controls I would give them a shot. I've found that they are very helpful, and the user experience is good. Their upload control is quite nice.

OTHER TIPS

I just posted about this in another question, but if you use this ActiveX control you will be able to process images quickly and efficiently. The component will actually resize the images on the client machine before sending them. This reduces unnecessary bandwidth and transfers multiple images at one time.

We extended the FileUploadControl to add some validation. We also wrote our own control that allows multiple files to be uploaded at once. We are currently evaluating both. Hopefully we decide on one, I would hate to have 2 different upload controls to maintain.

Check out Dean Brettle's NeatUpload. It's basically a custom HttpHandler that streams files to disk with loads of extra configurability. It's open source and Dean is an absolute star for supporting his users.

Check this one out:

Html-5-Uploader

Drag-and-drop multiple files on your webpage!

Link doesn't always work so here it is again: http://www.igloolab.com/jquery-html5-uploader/

.

Controller: (modified from my original code, hope i don't forgot something, but it's pretty clear)

     <HttpPost()> _
     Public Function Upload(uploadedFile As System.Web.HttpPostedFileBase) As ActionResult
        If uploadedFile IsNot Nothing Then 
            If uploadedFile.ContentLength > 0 Then

               Dim mimeType As String = Nothing 
                'Upload
                Dim PathFileName As String =   System.IO.Path.GetFileName(uploadedFile.FileName)

                 Dim path =  System.IO.Path.Combine(Server.MapPath("~/App_Data/Uploads"), PathFileName)

                If Not System.IO.Directory.Exists(Path) Then
                    System.IO.Directory.CreateDirectory(Path)
                End If

                Dim firstLoop As Boolean = True
                uploadedFile.SaveAs(path)                  
             Next
        End If
        Return Nothing
    End Function

This is the View (don't forget links to css and js ;))

     <h1>
            @SharedStrings.Upload</h1>
        <h2>
            @SharedStrings.UploadInformation</h2>
        <div id="dropbox">
        </div>
        <div id="upload">
        </div>
        <script type="text/javascript">

            $(function () {

                var fileTemplate = "<div id=\"{{id}}\">"; fileTemplate += "<div class=\"progressbar\"></div>"; fileTemplate += "<div class=\"preview\"></div>"; fileTemplate += "<div class=\"filename\">{{filename}}</div>"; fileTemplate += "</div>"; function slugify(text) { text = text.replace(/[^-a-zA-Z0-9,&\s]+/ig, ''); text = text.replace(/-/gi, "_"); text = text.replace(/\s/gi, "-"); return text; }
                $("#dropbox").html5Uploader({ onClientLoadStart: function (e, file) {
                    var upload = $("#upload"); if (upload.is(":hidden")) { upload.show(); }
                    upload.append(fileTemplate.replace(/{{id}}/g, slugify(file.name)).replace(/{{filename}}/g, file.name));
                }, onClientLoad: function (e, file) { /*$("#" + slugify(file.name)).find(".preview").append("<img src=\"" + e.target.result + "\" alt=\"\">");*/ }, onServerLoadStart: function (e, file) { $("#" + slugify(file.name)).find(".progressbar").progressbar({ value: 0 }); }, onServerProgress: function (e, file) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; $("#" + slugify(file.name)).find(".progressbar").progressbar({ value: percentComplete }); } }, onServerLoad: function (e, file) { $("#" + slugify(file.name)).find(".progressbar").progressbar({ value: 100 }); } 
                }); 
            });
        </script>

And my css

 /*html 5 uploader*/
#dropbox 
{
/*picture where people would drag-drop their files to*/
 background-image:url(../Images/UploadToMedia.png);
 height:128px;
 margin-bottom:40px;
 margin-left:auto;
 margin-right:auto;
 background-repeat:no-repeat;
 margin-top:0;
 width:128px;
}

You could try a flash-based solution that allows you to display whatever text, textboxes, buttons, or anything else as part of your own file upload control. These solutions typically put a 1x1 flash movie on the page that acts as a bridge between javascript and flash such that javascript can call flash's file upload box dynamically.

In a recent project, I used FancyUpload to do exactly that.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top