<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CollapsiblePanel.aspx.cs" Inherits="EAFUpload.CollapsiblePanel" %>
<!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>Embed EAflashUpload into collapsible panel.</title>
<link rel="stylesheet" href="style.css" />
<style type="text/css">
.Panel
{
width: 455px;
text-align:center;
}
.Caption
{
width: 439px;
}
.LeftCorner
{
margin: 0px;
padding: 0px;
background: url(images/leftcorner.gif) bottom left no-repeat;
}
.RightCorner
{
margin: 0px;
background: url(images/rightcorner.gif) bottom right no-repeat;
}
.Center
{
margin: 0px 8px 0px 8px;
pading: 5px 0px 5px 0px;
background: url(images/centerbg.gif) bottom repeat-x;
}
.UploaderBorder
{
margin: 0px;
border: 1px solid #a4c0e8;
border-top: 5px solid #a4c0e8;
}
.Arrow
{
border: none;
cursor: pointer;
}
</style>
<script type="text/javascript">
// Handles EAFlashUpload's onMovieLoad event and displays existing loading errors.
function EAFlashUpload_onMovieLoad(errors)
{
if (errors != "")
alert(errors);
}
function EAFlashUpload_onFilesAdded()
{
var progressElement = document.getElementById("caption");
progressElement.innerHTML = "Ready for upload...";
}
function EAFlashUpload_onUploadProgress(progress)
{
var progressElement = document.getElementById("caption");
progressElement.innerHTML = progress.percentsDone + "% uploaded...";
}
function EAFlashUpload_onUploadEnd()
{
var progressElement = document.getElementById("caption");
progressElement.innerHTML = "Upload has been completed...";
}
function ExpandCollapse(sender, newAction)
{
sender.style.display = "none";
document.getElementById(newAction).style.display = "inline";
if(newAction == 'expand')
{
EAFlashUpload.style.width = 0 + 'px';
EAFlashUpload.style.height = 0 + 'px';
}
else
{
EAFlashUpload.style.width = 450 + 'px';
EAFlashUpload.style.height = 350 + 'px';
}
}
</script>
</head>
<body>
<p>
This example demonstrate how to place EAFlashUpload inside collapsible panel.
</p>
<div style="border: 1px solid #000000; padding: 10px;">
<b>Note:</b> Trial version has two limitiations: maximum files count is 10 and size of each file cannot be larger than 50 MB.
</div>
<noscript>
<h3>JavaScript should be enabled in your browser for successful work of this example.</h3>
</noscript>
<br />
<div class="Panel">
<div class="LeftCorner">
<div class="RightCorner">
<div class="Center">
<table class="Caption">
<tr>
<td>
<span id="caption">Ready for upload</span>
</td>
<td style="text-align:right;">
<span><img class="Arrow" id="collapse" src="images/collapse.gif" onClick="ExpandCollapse(this, 'expand');"/><img class="Arrow" style="display:none;" id="expand" src="images/expand.gif" onClick="ExpandCollapse(this, 'collapse');"/></span>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="UploaderBorder">
<div id="EAFlashUpload_holder">
You need at least Adobe Flash Player 10 for successful work. Download the latest version from here:
<br />
<a href="http://www.adobe.com/support/flashplayer/downloads.html">Adobe Flash Player</a>
</div>
</div>
</div>
<script type="text/javascript" src="EAFUpload/swfobject.js"></script>
<script type="text/javascript">
var params = {
BGcolor: "#ffffff"
};
var attributes = {
//data: "EAFUpload.swf",
id: "EAFlashUpload",
name: "EAFlashUpload"
};
var flashvars = new Object();
// In IE and non-IE browsers Flash resolve relative path differently if page with EAFlashUpload is placed in a different directory than swf files.
// If you place EAFlashUpload files and container page in the same directory then the problem doesn't appear.
// Below code detects non-IE browsers and changes url of upload script.
var uploadUrl = "CollapsiblePanel.aspx"; //Note: & symbol should be encoded to %26 for query string values. Ex: http://www.somesite.com/uploader.aspx?field1=value1%26field2=value2
if (!document.all) {
uploadUrl = "../" + uploadUrl;
}
flashvars["uploader.uploadUrl"] = uploadUrl;
flashvars["viewFile"] = "EAFUpload/TableView.swf";
swfobject.embedSWF("EAFUpload/EAFUpload.swf", "EAFlashUpload_holder", "450", "350", "10.0.0", "EAFUpload/expressInstall.swf", flashvars, params, attributes);
</script>
<br />
<hr />
<div style="padding: 10px; font-weight: bold;">
Note: If you have questions regarding this example please let us know <a href="mailto:support%40easyalgo.com?Subject=CollapsiblePanel">support@easyalgo.com</a>. Any assistance is provided for free.
</div>
<a target="_blank" href="http://www.easyalgo.com/quickstart/util/srcview.aspx?path=/Examples/EAFlashUpload/CollapsiblePanel.src">View source code</a>
</body>
</html>