Rank: Advanced Member
Groups:
Joined: 8/3/2003(UTC)
Posts: 998
|
Here is changed Multiple Descriptions Sample code which allows several package file upload processing. The original sample does not support FilesPerOnePackageCount property usage so we have made a code sample which does. Here it is: default.aspx Code:<%@ Page Language="C#" AutoEventWireup="false" %>
<!--BEGIN-->
<!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>Aurigma Image Uploader</title>
<script src="../iuembed.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
This demo application shows to create custom upload pane through HTML code. This
custom pane allows to associate additional data with each data - file title and
description. It can be easily modified to send any other data. In addition, it demonstrates
how to:
<ul>
<li>Create custom HTML buttons for Image Uploader instead of standard ones.</li>
<li>Upload thumbnail along with a source file.</li>
</ul>
<fieldset>
<legend>Note</legend>This demo application <strong>deletes all previously uploaded files</strong>.
Keep in mind that it is a feature of this demo, not of Image Uploader itself. If
you <strong>do not want to delete uploaded files</strong>, you should modify the
upload processing page specified by the <strong>Action</strong> parameter.
</fieldset>
<table>
<tbody>
<tr>
<td align="right">
<input id="UploadButton" type="button" value="Upload Files" disabled="disabled" onclick="UploadButton_click();" />
</td>
</tr>
<tr>
<td>
<script type="text/javascript">
//Create JavaScript object that will embed Image Uploader to the page.
var iu = new ImageUploaderWriter("ImageUploader1", 650, 250);
//For ActiveX control full path to CAB file (including file name) should be specified.
iu.activeXControlCodeBase = "../ImageUploader4.cab";
iu.activeXControlVersion = "4,1,21,0";
//For Java applet only path to directory with JAR files should be specified (without file name).
iu.javaAppletCodeBase = "../";
iu.javaAppletCached = true;
iu.javaAppletVersion = "2.1.21.0";
//iu.showNonemptyResponse = "off";
//Configure appearance.
iu.addParam("PaneLayout", "ThreePanes");
iu.addParam("FolderView", "Thumbnails");
[b]iu.addParam("FilesPerOnePackageCount", "3");[/b]
iu.addParam("BackgroundColor", "#eff1f9");
iu.addParam("ShowUploadListButtons", "true");
iu.addParam("ButtonRemoveFromUploadListText", "");
iu.addParam("ButtonRemoveAllFromUploadListText", "");
iu.addParam("ShowDescriptions", "false");
iu.addParam("EnableRotate", "false");
iu.addParam("ShowButtons", "false");
//Hide standard upload pane.
iu.addParam("FolderPaneHeight", "-1");
//Configure thumbnail settings.
iu.addParam("UploadThumbnail1FitMode", "Fit");
iu.addParam("UploadThumbnail1Width", "120");
iu.addParam("UploadThumbnail1Height", "120");
iu.addParam("UploadThumbnail1JpegQuality", "60");
iu.addParam("ShowDebugWindow", "True");
//Configure URL files are uploaded to.
iu.addParam("Action", "upload.aspx");
//Configure URL where to redirect after upload.
iu.addParam("RedirectUrl", "gallery.aspx");
//Add event handlers.
iu.addEventListener("UploadFileCountChange", "ImageUploader_UploadFileCountChange");
iu.addEventListener("BeforeUpload", "ImageUploader_BeforeUpload")
iu.fullPageLoadListenerName = "fullPageLoad";
//Tell Image Uploader writer object to generate all necessary HTML code to embed
//Image Uploader to the page.
iu.writeHtml();
</script>
</td>
</tr>
<tr>
<td>
<!--
The code which forms the upload pane itself is located in a separate script.js file.
It is highly recommended to keep this code in a separate file to avoid problems with
Internet Explorer with security update 912945 (ActiveX controls activation):
http://support.microsoft.com/kb/912945/en-us
-->
<div id="UploadPaneFrame">
<div id="UploadPane"></div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<!--END-->
script.js Code:var imageUploader1 = null;
var uniqueId = 0;
var prevUploadFileCount = 0;
var dragAndDropEnabled = true;
var allowDrag = false;
function fullPageLoad(){
imageUploader1 = getImageUploader("ImageUploader1");
var UploadPane=document.getElementById("UploadPane");
while (UploadPane.childNodes.length > 0){
UploadPane.removeChild(UploadPane.childNodes[0]);
}
//Fix Opera applet z-order bug
if (__browser.isOpera){
UploadPane.style.height = "auto";
UploadPane.style.overflow = "visible";
}
//Handle drag & drop.
if (__browser.isIE || __browser.isSafari){
var target = __browser.isIE ? UploadPane : document.body;
target.ondragenter = function(){
var e=window.event;
var data = e.dataTransfer;
if (data.getData('Text')==null){
this.ondragover();
data.dropEffect="copy";
allowDrag=true;
}
else{
allowDrag=false;
}
}
target.ondragover=function(){
var e = window.event;
e.returnValue = !allowDrag;
}
target.ondrop = function(){
var e = window.event;
this.ondragover();
e.dataTransfer.dropEffect = "none";
processDragDrop();
}
}
else {
window.captureEvents(Event.DRAGDROP);
window.addEventListener("dragdrop", function(){
processDragDrop();
}, true);
}
}
function processDragDrop(){
alert("Adding files with drag & drop can not be implemented in standard version due security reasons. However it can be enabled in private-label version."+
"\r\n\r\nFor more information please contact us at sales@aurigma.com");
if (imageUploader1){
//imageUploader1.AddToUploadList();
}
}
//To identify items in upload list, GUID are used. However it would work
//too slow if we use GUIDs directly. To increase performance, we will use
//hash table which will map the guid to the index in upload list.
//This function builds and returns the hash table which will be used for
//fast item search.
function getGuidIndexHash(){
var uploadFileCount = imageUploader1.getUploadFileCount();
var guidIndexHash = new Object();
for (var i = 1; i <= uploadFileCount; i++){
guidIndexHash[imageUploader1.getUploadFileGuid(i)] = i;
}
return guidIndexHash;
}
//This function returns HTML which represent the single item in the custom upload pane.
//It contains of the Thumbnail object and form elements for each piece of data (in our
//case - title and description). If you want to upload extra data, you should write
//additional form elements here.
//
//It is highly recommended not to copy this function into the main HTML page to
//avoid problems with activation of ActiveX controls in Internet Explorer with
//security update 912945. You can read more detailed about activation on Microsoft website:
//
//http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/activating_activex.asp
function addUploadFileHtml(index){
var guid = imageUploader1.getUploadFileGuid(index);
var fileName = imageUploader1.getUploadFileName(index);
var h = "<table cellspacing=\"5\"><tbody>";
h += "<tr>";
h += "<td class=\"Thumbnail\" align=\"center\" valign=\"middle\">";
//Add thumbnail control and link it with Image Uploader by its name and GUID.
var tn = new ThumbnailWriter("Thumbnail" + uniqueId, 96, 96);
//Copy codebase and version settings from ImageUploaderWriter instance.
tn.activeXControlCodeBase = iu.activeXControlCodeBase;
tn.activeXControlVersion = iu.activeXControlVersion;
tn.javaAppletCodeBase = iu.javaAppletCodeBase;
tn.javaAppletCached = iu.javaAppletCached;
tn.javaAppletVersion = iu.javaAppletVersion;
tn.addParam("ParentControlName", "ImageUploader1");
tn.addParam("Guid", imageUploader1.getUploadFileGuid(index));
h += tn.getHtml();
h += "</td>";
h += "<td valign=\"top\">";
//Add Title element.
h += "Title:
";
h += "<input id=\"Title" + uniqueId + "\" class=\"Title\" type=\"text\" />
";
//Add Description element.
h += "Description:
";
h += "<textarea id=\"Description" + uniqueId + "\" class=\"Description\"\"></textarea>";
h += "</td>";
h += "</tr>";
h += "<tr>";
h += "<td align=\"center\"><a href=\"#\" onclick=\"return Remove_click('" + guid + "');\">Remove</a></td>";
h += "<td></td>";
h += "</tr>";
h += "</tbody></table>";
//Create DIV element which will represent the upload list item.
var div = document.createElement("div");
div.className = "UploadFile";
div.innerHTML = h;
div._guid = guid;
//_uniqueId is used for fast access to the Title and Description form elements.
div._uniqueId = uniqueId;
//Append this upload list item to the custom upload pane.
document.getElementById("UploadPane").appendChild(div);
//Increase the ID to guaranty uniqueness.
uniqueId++;
}
//Synchronize custom upload pane with Image Uploader upload list when
//some files are added or removed.
function ImageUploader_UploadFileCountChange(){
if (imageUploader1){
var uploadFileCount = imageUploader1.getUploadFileCount();
//Files are being added.
if (prevUploadFileCount <= uploadFileCount){
for (var i = prevUploadFileCount + 1; i <= uploadFileCount; i++){
addUploadFileHtml(i);
}
}
//Files are being removed.
else{
var guidIndexHash = getGuidIndexHash();
var UploadPane = document.getElementById("UploadPane");
var i = UploadPane.childNodes.length - 1;
while (i >= 0){
if (guidIndexHash[UploadPane.childNodes[i]._guid] == undefined){
UploadPane.removeChild(UploadPane.childNodes[i]);
}
i--;
}
}
prevUploadFileCount = uploadFileCount;
document.getElementById("UploadButton").disabled = (uploadFileCount == 0);
}
}
//Append the additional data entered by the user (title and description)
//to the upload. If you add more fields, do not forget to modify this event
//handler to call AddField for these fields.
function ImageUploader_BeforeUpload(){
var guidIndexHash = getGuidIndexHash();
var UploadPane = document.getElementById("UploadPane");
for (var i = 0; i < UploadPane.childNodes.length; i++){
var div = UploadPane.childNodes[i];
var index = guidIndexHash[div._guid];
//Description will be sent as a native Description POST field
//provided by Image Uploader.
imageUploader1.setUploadFileDescription(index,
document.getElementById("Description" + div._uniqueId).value);
//Title will be sent as a custom Title_N POST field, where N is an
//index of the file.
imageUploader1.AddField("Title_" + index, document.getElementById("Title" + div._uniqueId).value);
}
[b]imageUploader1.AddField("FilesPerOnePackageCount", imageUploader1.getFilesPerOnePackageCount());[/b]
}
//This function is used to handle Remove link click. It removes an item
//from the custom upload pane by specified GUID.
function Remove_click(guid){
var guidIndexHash = getGuidIndexHash();
imageUploader1.UploadFileRemove(guidIndexHash[guid]);
}
//This function posts data on server.
function UploadButton_click(){
imageUploader1.Send();
}
upload.aspx Code:<%@ Page Language="C#" AutoEventWireup="True" Debug="true" ValidateRequest="false" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Xml" %>
<script runat="server">
//This variable specifies relative path to the folder, where the gallery with uploaded files is located.
//Do not forget about the slash in the end of the folder name.
private string galleryPath = "../Gallery/";
private void Page_Load(System.Object sender, System.EventArgs e)
{
int packageIndex = Int32.Parse(Request.Form["PackageIndex"]);
[b]int filesPerOnePackageCount = Int32.Parse(Request.Form["FilesPerOnePackageCount"]);[/b]
//If we receive the first file, we delete all files and thumbnails we uploaded before.
if (packageIndex == 0)
{
//Delete source files.
DirectoryInfo dir = new DirectoryInfo(Server.MapPath(galleryPath));
foreach (FileInfo file in dir.GetFiles())
{
file.Delete();
}
//Delete thumbnails.
dir = new DirectoryInfo(Server.MapPath(galleryPath) + "/Thumbnails");
foreach (FileInfo file in dir.GetFiles())
{
file.Delete();
}
}
XmlDocument descriptions = new XmlDocument();
//If we receive the first file then
//we start from empty file with descriptions
if (packageIndex == 0)
{
descriptions.AppendChild(descriptions.CreateElement("files"));
}
else
{
descriptions.Load(Server.MapPath(galleryPath + "Descriptions.xml"));
}
//Get total number of uploaded files (all files are uploaded in a single package).
int fileCount = Int32.Parse(Request.Form["FileCount"]);
//Iterate through uploaded data and save the original file, thumbnail, and description.
[b]for (int i = 1; i <= fileCount; i++)[/b]
{
HttpPostedFile sourceFile = Request.Files["SourceFile_" + i];
string fileName = GetSafeFileName(sourceFile.FileName);
sourceFile.SaveAs(Server.MapPath(galleryPath + fileName));
Request.Files["Thumbnail1_" + i].SaveAs(Server.MapPath(galleryPath + "Thumbnails/" + fileName + ".jpg"));
//Save file info.
XmlElement xmlFile = descriptions.CreateElement("file");
xmlFile.SetAttribute("name", fileName);
xmlFile.SetAttribute("width", Request.Form["Width_" + i]);
xmlFile.SetAttribute("height", Request.Form["Height_" + i]);
[b]int realIndex = i + packageIndex * filesPerOnePackageCount;
xmlFile.SetAttribute("title", Request.Form["Title_" + realIndex]);[/b]
xmlFile.SetAttribute("description", Request.Form["Description_" + i]);
descriptions.DocumentElement.AppendChild(xmlFile);
}
descriptions.Save(Server.MapPath(galleryPath + "Descriptions.xml"));
}
//This method verifies whether file with such name already exists
//and if so, construct safe filename name (to avoid collision).
private string GetSafeFileName(string fileName)
{
string newFileName = fileName;
int j = 1;
while (File.Exists(Server.MapPath(galleryPath + newFileName)))
{
newFileName = j + "_" + fileName;
j++;
}
return newFileName;
}
</script>
Edited by user Tuesday, December 18, 2007 4:45:41 PM(UTC)
| Reason: Not specified |