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