15

I need to implement in my project ASP .NET MVC3 the jQuery file upload plugin:

http://blueimp.github.com/jQuery-File-Upload/

I have been Googling and I haven't found a whole project, only pieces of code. I don't know how to implement it.

Can someone help me? Can someone tell me where I can download a sample project or code?

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
rspaz16
  • 207
  • 1
  • 2
  • 8
  • Take a look on Telerik MVC Upload component http://demos.telerik.com/aspnet-mvc/upload It's very well-documented and, for sure, it's working. Telerik MVC controls are open source. – Azargoth Feb 20 '12 at 13:26

2 Answers2

46

Did you read the documentation of the plugin that you are trying to use? Did you try the basic plugin functionality? Did you try to create a new ASP.NET MVC 3 application in Visual Studio using the default template?

Did you try writing a simple controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
    {
        foreach (var file in files)
        {
            var filename = Path.Combine(Server.MapPath("~/App_Data"), file.FileName);
            file.SaveAs(filename);
        }
        return Json(files.Select(x => new { name = x.FileName }));
    }
}

and a corresponding view:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="@Url.Content("~/Scripts/blueimp/js/vendor/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/blueimp/js/jquery.iframe-transport.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/blueimp/js/jquery.fileupload.js")" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '@Url.Action("index")',
            done: function (e, data) {
                $.each(data.result, function (index, file) {
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            } 
        });
    });
</script>

<input id="fileupload" type="file" name="files" multiple="multiple"/>

If you haven't, I invite you to do so.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • I have read the documentation, but there are many examples which work in a different way. For this i needed a clear example to start. Thank you, @darin – rspaz16 Feb 21 '12 at 15:37
  • @Darin Dimitrov: not to hijack this thread but could you provide some guidance on a similar thread, http://bit.ly/HMkiWx in regards to routing on the post back? Any info would be greatly appreciated. – genxgeek Apr 03 '12 at 04:08
  • 3
    18.168 answers as of now. You must be kidding, I mean, you must have clones of yourself doing the heavy lifting... You're close o Skeet. :D hehehe. Thanks again and again and again Darin for the incredible amount of help. – Leniel Maccaferri Feb 06 '13 at 22:28
28

I've created a sample ASP.NET MVC 3 project on GitHub that shows how to use a full plug-in functionality, including deletion and download.

Maxim V. Pavlov
  • 10,303
  • 17
  • 74
  • 174