Click here to Skip to main content
15,393,124 members
Articles / Web Development / ASP.NET
Posted 5 Mar 2012


4 bookmarked

Upload files in WebMatrix with Uploadify plugin

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
6 Mar 2012CPOL2 min read
Using an upload plugin with progress bar in Razor pages


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.



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


You must add three folders to the new site root:

  • uploadify
  • upload
  • styles

Copy into the uploadify folder the following files from the Uploadify download (

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

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;

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);
<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <title>Uploadify Demo</title>
        <link href="/Styles/uploadify.css" 
          rel="stylesheet" type="text/css" media="screen" />
        <script type="text/javascript" 
        <script type="text/javascript" 
        <script type="text/javascript" 
        <div id="demo">
            <h2>Uploadify Demo</h2>
            <script type="text/javascript">
                $(function() {
                        '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.');
            <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" />

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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Gianmaria Gregori
Chief Technology Officer Federfarma Pavia
Italy Italy
No Biography provided

Comments and Discussions

QuestionHow to Cancel when uploading is progress Pin
rizwan muhammed khan gouri30-Aug-13 22:45
professionalrizwan muhammed khan gouri30-Aug-13 22:45 
QuestionException Occured Pin
rathishcr894-Nov-12 7:16
Memberrathishcr894-Nov-12 7:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.