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?

1
  • Take a look on Telerik MVC Upload component demos.telerik.com/aspnet-mvc/upload It's very well-documented and, for sure, it's working. Telerik MVC controls are open source. Commented Feb 20, 2012 at 13:26

2 Answers 2

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.

Sign up to request clarification or add additional context in comments.

3 Comments

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
@Darin Dimitrov: not to hijack this thread but could you provide some guidance on a similar thread, bit.ly/HMkiWx in regards to routing on the post back? Any info would be greatly appreciated.
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.
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.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.