Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET
Tip/Trick

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 34.3K   1.3K   4   2
Using an upload plugin with progress bar in Razor pages

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

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):

CSS
.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:

JavaScript
@{
    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.

License

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


Written By
Chief Technology Officer Federfarma Pavia
Italy Italy
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionException Occured Pin
rathishcr894-Nov-12 7:16
rathishcr894-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.