Click here to Skip to main content
Click here to Skip to main content

Upload files in WebMatrix with Uploadify plugin

By , 6 Mar 2012
Rate this:
Please Sign up or sign in to vote.

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

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

License

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
Follow on   Twitter

Comments and Discussions

 
QuestionHow to Cancel when uploading is progress Pinmemberrizwan muhammed khan gouri30-Aug-13 22:45 
QuestionException Occured Pinmemberrathishcr894-Nov-12 7:16 

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

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

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