Using uploadify in ASP.Net MVC application

Dropbox is getting more and more popular. I use it on my desktop, laptop, iphone, and ipad. Once I went to a post office to post a document, and realised that I don’t know the address. I had my iphone with me, so used Dropbox to get the address. It was so useful, and ever since, I became a fan of Dropbox.

Anyway, Dropbox has nice Flash-based upload functionality, and I wanted to mimic the feature in my asp.net application. SlickUpload is a very good component, but commercial. I googled and came across uploadify.

The site has good example code and a link to asp.net example too. If you want to make your file upload testable, read Scott hanselman’s fantastic post about it.

The below is my code. One thing to note in the code are

  • Url.SiteRoot() is a custom extension method that finds root of the web application. I use it as this application goes under another application. So the url of images is not /public/images/, but /[unknown]/public/images. You would not need Url.SiteRoot() if your application root is the top level directory in iis.
public ActionResult UploadFiles()
{
    foreach (string file in Request.Files)
    {
        var postedFileBase = Request.Files[file];
        if (postedFileBase.ContentLength == 0)
            continue;

        string savedFilename = Path.Combine(AppDomain.CurrentDomain.BaseDirectory,
                                            Path.GetFileName(postedFileBase.FileName));
        postedFileBase.SaveAs(savedFilename);
    }

    return View();
}

$(function(){
    $("#file").uploadify({
        'uploader': '<%= Url.SiteRoot() %>/public/images/uploadify.swf',
        'script': 'Home/UploadFiles',
        'cancelImg': '<%= Url.SiteRoot() %>/public/images/cancel.png',
        'auto': false,
        'multi': false
    });
})

<h2>Simple file upload.</h2>
<p>
    
    <form action="<%= Url.Action("UploadFiles", "Home") %>" method="post" enctype="multipart/form-data">
        
        <p>
        <input type="file" name="file" id="file" />
        <a href="javascript:$('#file').uploadifyUpload();">Upload Files</a>
        </p>
        
    </form>
</p>

Using uploadify in ASP.Net MVC application

2 thoughts on “Using uploadify in ASP.Net MVC application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s