|
Mediachase FileUploader.NET 2.0 | Support Forum | Email Us |
Quick
Developer Tutorial
The
following lessons will show you from start to finish how to utilize the
Mediachase FileUploader.NET.
Please
follow the steps within each tutorial lesson to learn more and to get acquainted
with how to use the Mediachase FileUploader.NET. Let’s get started.
Lesson
0 – Hello Upload
[Go to Online sample] [Download source]
1. Start
The example
creates a simple file upload form with a progress popup window. You can skip
this lesson and go to Lesson 1 if you want to fully explore the overall power
of Mediachase FileUploader.NET controls.
2. Add reference to the
Mediachase.FileUploader.dll
|
|
3. Add the following code
to your project web.config file:
<configSections>
<sectionGroup name="mediachase.fileUploader" type="Mediachase.FileUploader.Configuration.MediachaseFileUploaderSectionGroup,
Mediachase.FileUploader">
<section name="fileUploaderContext" type="Mediachase.FileUploader.Configuration.FileUploaderContextSection,
Mediachase.FileUploader"/>
<section name="tempFileStorage" type="Mediachase.FileUploader.Web.Configuration.TempFileStorageSection,
Mediachase.FileUploader"/>
<section name="uploadProgress" type="Mediachase.FileUploader.Web.Configuration.UploadProgressSection,
Mediachase.FileUploader"/>
<section name="fileUploadControl" type="Mediachase.FileUploader.Web.Configuration.FileUploadControlSection,
Mediachase.FileUploader"/>
</sectionGroup>
</configSections>
<mediachase.fileUploader>
<fileUploaderContext/>
<tempFileStorage timeout="60">
<providers>
<add name="McLocalDiskTempFileStorageProvider" type="Mediachase.FileUploader.Web.LocalDiskTempFileStorageProvider,
Mediachase.FileUploader" description="" tempStoragePath="%TEMP%" />
</providers>
</tempFileStorage>
<uploadProgress timeout="60">
<providers>
<add name="McInProcessProgressStateProvider" type="Mediachase.FileUploader.Web.InProcessUploadProgressProvider,
Mediachase.FileUploader" description="" />
</providers>
</uploadProgress>
</mediachase.fileUploader>
Add the following string to <httpModules>
section:
<add name="Mediachase.FileUploader.McHttpModule" type="Mediachase.FileUploader.McHttpModule,
Mediachase.FileUploader"/>
Add the following string to
<httpHandlers> section:
<add verb="GET" path="McFileUploaderResources.axd" type="Mediachase.FileUploader.AssemblyResourceHandler,
Mediachase.FileUploader" />
4. Add McHtmlInputFile
control, ShowProgress java script function and button into the page. Assign
client-click event with ShowProgressFunction
<%@
Page Language="C#" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="HelloUpload._Default"
%>
<%@
Register Assembly="Mediachase.FileUploader"
Namespace="Mediachase.FileUploader.Web.UI"
TagPrefix="mcf" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head
runat="server">
<title>Hello Upload</title>
</head>
<body>
<script language="javascript">
function ShowProgress()
{
var w = 300;
var h = 180;
var l = (screen.width - w) / 2;
var t = (screen.height - h) / 2;
winprops
= 'resizable=0, height='+h+',width='+w+',top='+t+',left='+l+'w';
var f = window.open('Progress.aspx?key=progress&progressUid='+document.forms[0].__MEDIACHASE_FORM_UNIQUEID.value,
"_blank", winprops);
}
</script>
<form id="form1"
runat="server">
<div id="Caption"
style="FONT-SIZE: large; FONT-FAMILY: 'Arial Black'">Mediachase
FileUploader.Net 2.0 Hello Upload
Sample</DIV>
<hr>
<div id="Label"
style="FONT-SIZE: medium; FONT-FAMILY: 'Arial'">Please select a
File and Press Upload button.</DIV>
<hr>
<mcf:mchtmlinputfile id="mcHtmlInputFile"
runat="server"
maxlength="-1"
multifilecount="5"
multifileupload="True"
name="McHtmlInputFile1"
size="-1"
type="file"
width="528px"></mcf:mchtmlinputfile>
<br>
<input
id="btnUpload" type="submit" value="Upload"
runat="server" onclick="ShowProgress()" onserverclick="btnUpload_ServerClick"/>
</form>
</body>
</html>
5. Add a new page Progress.aspx
into the project. The page includes styles and FileUploadProgress control only.
<%@
Page Language="C#" AutoEventWireup="true"
Codebehind="Progress.aspx.cs"
Inherits="HelloUpload.Progress" %>
<%@
Register Assembly="Mediachase.FileUploader"
Namespace="Mediachase.FileUploader.Web.UI"
TagPrefix="mcf" %>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>File Uploading
Progress</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8" />
<style type="text/css">
html, body {
height:100%;
margin:0;
width: 100%;
font-family:
verdana,Arial,Helvetica,sans-serif;
font-size: 8pt;
color: black;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
input {
font-family:
verdana,Arial,Helvetica,sans-serif;
font-size: 8pt;
color: black;
}
p {
padding:5px 0px 5px 0px;
margin: 0px;
}
</style>
</head>
<body>
<div style="padding:
10px;">
<form id="ProgressBar"
method="post" runat="server">
<mcf:FileUploadProgress
ID="fuProgress"
runat="server"
ProgressBarBoundaryStyle-BorderColor="#8080FF"
ProgressBarBoundaryStyle-BorderStyle="Solid" ProgressBarBoundaryStyle-BorderWidth="1px"
ProgressBarStyle-BackColor="MediumBlue"
ProgressBarStyle-Height="15px"
ScriptPath=""
ProgressBarBoundaryStyle-Height="17px" ProgressBarBoundaryStyle-Width="250px">
<InfoTemplate>
<%# DataBinder.Eval(Container,
"UploadBytesReceived")%>
from <%#
DataBinder.Eval(Container, "UploadBytesTotal")%><br />
Estimated: <%# DataBinder.Eval(Container,
"UploadEstimatedTime")%><br />
Remaining: <%# DataBinder.Eval(Container,
"UploadTimeRemaining")%>
</InfoTemplate>
</mcf:FileUploadProgress>
</form>
</div>
</body>
</html>
6. A Simple FileUploader
control will appear on your page.
|
|
|
Fig. 1 |
|
|
|
Fig. 2 |
|
|
|
Fig. 3 |
