Upload files in WebMatrix with Uploadify plugin

Gianmaria Gregori

5.00/5 (2 votes)

Mar 5, 2012

CPOL

2 min read

35156

1339

Using an upload plugin with progress bar in Razor pages

Download UploadifySite2.zip - 1.8 KB

Introduction

In a web site created with WebMatrix it’s possible to use the FileUpload helper, one of the helpers from the ASP.NET Web Helpers Library, for allowing the file upload.

Nevertheless, there are a lot of plugins that allow more customization possibilities, among them the presence of a progress bar that traces the upload process.

One of there is Uploadify, a free, highly customizable utility implemented in jQuery.

Its integration into a CSHTML page is not difficult, even if there aren’t examples of its use with WebMatrix.

How to do

In the following I outline, the steps to take to accomplish a working implementation of its last stable release, version 2.1.4, after downloading it from Uploadify site.

First

You must create a new WebMatrix site from the Empty Site template.

Second

You must add three folders to the new site root:

uploadify
upload
styles

Third

Copy into the uploadify folder the following files from the Uploadify download (uploadify-v2.1.4.zip):

cancel.png
jquery.uloadify.v2.1.4.min.js
jquery-1.4.2.min.js
swfobject.js
uploadify.swf

Fourth

Copy into styles folder the uploadify.css file (I have used largely the styles from the uploadify site on-line demo):

.uploadifyQueueItem {
    background-color: #FFFFFF;
    border: none;
    border-bottom: 1px solid #E5E5E5;
    font: 11px Verdana, Geneva, sans-serif;
    height: 50px;
    margin-top: 0;
    padding: 10px;
    width: 350px;
}
.uploadifyError {
    background-color: #FDE5DD !important;
    border: none !important;
    border-bottom: 1px solid #FBCBBC !important;
}
.uploadifyQueueItem .cancel {
    float: right;
}
.uploadifyQueue .completed {
    color: #C5C5C5;
}
.uploadifyProgress {
    background-color: #E5E5E5;
    margin-top: 10px;
    width: 100%;
}
.uploadifyProgressBar {
    background-color: #0099FF;
    height: 3px;
    width: 1px;
}
#demo #queue {
    border: 1px solid #E5E5E5;
    height: 213px;
    margin-bottom: 10px;
    width: 370px;
}

Fifth

Create the main page (default.cshtml) in the root with the contents to present the selection form to the user and to save the uploaded files in the upload folder:

@{
    if (IsPost) {
        var fileData = Request.Files[0];
        var destFolder = Request["folder"];
        var fileName = Path.GetFileName(fileData.FileName);
        var fileSavePath = Server.MapPath("~" + destFolder + fileName);
        fileData.SaveAs(fileSavePath);
    }
}
 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Uploadify Demo</title>
        <link href="/Styles/uploadify.css" 
          rel="stylesheet" type="text/css" media="screen" />
        <script type="text/javascript" 
          src="/uploadify/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" 
          src="/uploadify/swfobject.js"></script>
        <script type="text/javascript" 
          src="/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
    </head>
    <body>
        <div id="demo">
            <h2>Uploadify Demo</h2>
        
            <script type="text/javascript">
                $(function() {
                    $('#file_upload').uploadify({
                        'uploader'       : '/uploadify/uploadify.swf',
                        'script'         : '@Request.FilePath',
                        'cancelImg'      : '/uploadify/cancel.png',
                        'folder'         : '/upload/',
                        'multi'          : true,
                        'auto'           : true,
                        'fileExt'        : '*.jpg;*.gif;*.png',
                        'fileDesc'       : 'Image Files (.JPG, .GIF, .PNG)',
                        'queueID'        : 'queue',
                        'queueSizeLimit' : 3,
                        'simUploadLimit' : 3,
                        'sizeLimit'   : 102400,
                        'removeCompleted': false,
                        'onSelectOnce'   : function(event,data) {
                            $('#status-message').text(data.filesSelected + ' files have been added to the queue.');
                            },
                        'onAllComplete'  : function(event,data) {
                            $('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
                            }
                    });
                });
            </script>
            <div class="demo-box">
                <div id="status-message">Select some files to upload:</div>
                <div id="queue"></div>
                <input id="file_upload" type="file" name="Filedata" />
            </div>
        </div>
    </body>
</html>

Points of Interest

Referring to the on-line documentation at the uploadify site for the meaning of the instance settings (mostly the ones used in the on-line custom demo), I would like to comment only the script value, which points to the back-end script that processes the uploaded files.

Using @Request.FilePath I force the plugin to POST the data to the same main page, which receives the file uploaded (Request.Files[0]) and the path to the folder where to save the file (Request["folder"]) and saves it.