Click here to Skip to main content
13,457,673 members
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 5 Mar 2012

Upload files in WebMatrix with Uploadify plugin

, 6 Mar 2012
Rate this:
Please Sign up or sign in to vote.
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

You may also be interested in...


Comments and Discussions

QuestionHow to Cancel when uploading is progress Pin
rizwan muhammed khan gouri30-Aug-13 22:45
memberrizwan 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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180322.1 | Last Updated 6 Mar 2012
Article Copyright 2012 by Gianmaria Gregori
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid