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

Uploadify in WebMatrix again

, 11 Mar 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Additions to the implementations of the Uploadify plugin in Webmatrix

Introduction

A few days ago I’ve submitted a tip on how to integrate Uploadify, a free, highly customizable utility for the file upload, into a WebMatrix site .

Starting from this point, I will now propose a solution to two possible problems in the use of this plugin:

  • how to dynamically set the destination folder for the uploaded files;
  • how to redirect to another page at the upload completion.

I have modified the simple website depicted in the former tip to accomplish both targets.

In particular, this implementation of Uploadify saves the uploaded files into a destination folder named accordingly with the current date and, on upload completed, redirects to a new page showing a report on the upload session.

Site creation

Like in the other tip, the site root folder must present the following three folders:

  • styles
  • upload
  • uploadify

and uploadify folder must include five files from the Uploadify v2.1.4 download:

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

In the following you can see the content of the uploadify.css file, that must be saved into the styles folder

body {
    font: 14px Verdana, Geneva, sans-serif;    
}

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

and the source code of the two cshtml pages located in the site root directory, the main page that accomplish the upload (default.cshtml)

@{
    if (IsPost) {
        // file uploaded and destination folder from Uploadify
        var fileData = Request.Files[0];
        var foldername = Request["folder"];
        // builds destination folder path
        var root = Server.MapPath("/");
        var folderpath = Path.Combine(root, @Href("~/upload/" + foldername));
        // creates destination folder 
        if (!Directory.Exists(folderpath)) {
            Directory.CreateDirectory(folderpath);
        }
        // saves file
        var fileName = Path.GetFileName(fileData.FileName);
        var fileSavePath = folderpath + "/" + 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">
                var dest = "";
            
                $(function() {
                    
                    $('#file_upload').uploadify({
                        'uploader'       : '/uploadify/uploadify.swf',
                        'script'         : '@Request.FilePath',
                        'cancelImg'      : '/uploadify/cancel.png',
                        'multi'          : 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) {
                            //adds destination folder to data object
                            data.folder = dest;
                            location.replace("Report?" + jQuery.param(data));
                            }
                    });
                    
                });
                
                function folderFromDate(date) {
                    var folder = ("0000" + date.getFullYear()).slice(-4) + 
                        ("00" + (1 + date.getMonth())).slice(-2) +
                        ("00" + date.getDate()).slice(-2) + "_" +
                        ("00" + date.getHours()).slice(-2) +
                        ("00" + date.getMinutes()).slice(-2) +
                        ("00" + date.getSeconds()).slice(-2);
                    
                    return folder;
                }
                
                function uploadFiles() {
                    dest = folderFromDate(new Date());
                    $('#file_upload').uploadifySettings('folder', dest);
                    $('#file_upload').uploadifyUpload();
                }
           </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>
                <br/><a href="javascript:uploadFiles();">Upload Files</a>
            </div>
        </div>
    </body>
</html>

and the report page that is shown after the upload (report.cshtml).

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Upload Report</title>
        <link href="/Styles/uploadify.css" rel="stylesheet" type="text/css" media="screen" />
    </head>
    <body>
        <h2>Report</h2>
        <p>Bytes Loaded: @Request.QueryString["allBytesLoaded"]</p>
        <p>Files Uploaded: @Request.QueryString["filesUploaded"]</p>
        <p>Upload Speed (KB/s): @Request.QueryString["speed"]</p>
        <p>Errors: @Request.QueryString["errors"]</p>
        <p>Destination Folder: @Request.QueryString["folder"]</p>
    </body>
</html>

Points of Interest

Unlike in the former, in this implementation the Uploadify instance is created without setting the folder option (which points at the folder where to save the files) and the auto option (which starts automatically the upload).

The upload is started by the uploadFiles function, handled by the row

<a href="javascript:uploadFiles();">Upload Files</a>.

Before starting the upload, uploadFiles function generates the destination folder’s name from the current date employing the folderFromDate function, which returns a string in aaaaMMdd_hhmmss format.

Once completed the upload, the onAllComplete Uploadify event is fired running a function that adds the destination folder as a new property to the data object containing details about the upload.

Then, the same function redirects to the report page passing as query string the serialized content of the data object.

License

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

Share

About the Author

Gianmaria Gregori
Chief Technology Officer Federfarma Pavia
Italy Italy
No Biography provided
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.1411022.1 | Last Updated 11 Mar 2012
Article Copyright 2012 by Gianmaria Gregori
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid