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:
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) {
var fileData = Request.Files[0];
var foldername = Request["folder"];
var root = Server.MapPath("/");
var folderpath = Path.Combine(root, @Href("~/upload/" + foldername));
if (!Directory.Exists(folderpath)) {
Directory.CreateDirectory(folderpath);
}
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) {
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.
