Rank: Member
Groups: Member
Joined: 2/13/2012(UTC)
Posts: 21
Thanks: 1 times
|
I wonder whether someone may be able to help me please. Through the documentation I've read and some invaluable guidance gained from Dmitry through the forum, I've put together the followig three scripts, 'index.php', 'gallery.php' and 'upload,php'. index.php Code:<!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">
<?php
$galleryPath = 'UploadedFiles/';
$absGalleryPath = realpath($galleryPath) . '/';
$dirs = array();
if (file_exists($absGalleryPath . 'files.xml')) {
$descriptions = new DOMDocument('1.0', 'utf-8');
$descriptions->load($absGalleryPath . 'files.xml');
for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) {
$name = $descriptions->documentElement->childNodes->item($i)->getAttribute('name');
$dir = dirname($name);
if ($dir && $dir != '.') {
$dirs[] = array_shift(explode('/', $dir));
}
}
$dirs = array_unique($dirs);
}
?>
<head>
<title>Add Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Libraries/jquery/jquery-1.4.3.min.js"></script>
<script src="Scripts/aurigma.uploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var uploaderID = 'Uploader1';
function updateInfo() {
var restrictions = $au.uploader(uploaderID).restrictions();
var params = {
enableCmyk: restrictions.enableCmyk() && restrictions.EnableCmyk() !== "false" ? 'True' : 'True',
fileMask: restrictions.fileMask() || '*.*',
maxFileCount: parseInt(restrictions.maxFileCount()) || 'any',
maxFileSize: parseInt(restrictions.maxFileSize()) || 'any',
maxImageHeight: parseInt(restrictions.maxImageHeight()) || 'any',
maxImageWidth: parseInt(restrictions.maxImageWidth()) || 'any'
};
var infoHtml = '<li>Allowed File Types: ${fileMask}</li>' +
'<li>Maximum number of files per upload: ${maxFileCount}</li>' +
'<li>Maximum file size: 1024KB </li>';
infoHtml = infoHtml.replace(/\$\{(\w+)\}/g, function(str0, str1, offset, s) { return params[str1]; });
$('#info').html(infoHtml);
}
updateInfo();
});
</script>
<script type="text/javascript">
$(function () {
$('input[name=folder-type]').click(function (ev) {
$('.folder-name').attr('disabled', 'disabled').parent().addClass('disabled');
$(this).parents('.row').removeClass('disabled').children('.folder-name').attr('disabled', '');
});
$('#folder-type-new').change(function() {
$('#folderNameTextBox').select().focus();
});
$('#folder-type-existing').change(function() {
$('#folderNameDropDownList').focus();
});
if ($('#folderNameDropDownList')[0].options.length == 0) {
$('#folder-type-existing').attr('disabled', true);
}
$('#folderNameTextBox').focus();
});
function onBeforeUpload() {
// Get folder name
var folderName = $('input[name=folder-type]:checked').parents('.row').children('.folder-name').val();
if (!folderName) {
alert('Specify folder name');
return false;
}
// Add folder name field
this.metadata().addCustomField('folder', folderName);
}
</script>
<style type="text/css">
<!--
.style1 {
font-size: 14px;
margin-top: 15px;
margin-right: 19px;
}
-->
</style>
</head>
<body style="font-family: Calibri; color: #505050; margin-right: 46px; margin-left: 449px; margin-bottom: 0px;">
<div align="right" class="style1"> Add Images → <a href = "gallery.php" /> View All Uploaded Images </a> </div>
<form id="addimages" name="addimages" class="page" action="index.php" method="post" enctype="application/x-www-form-urlencoded">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<fieldset class="content-block">
<legend>Restriction settings</legend>
<div class="row">
<ul id='info'>
</ul>
</div>
</fieldset>
<fieldset class="folder-settings content-block">
<legend>Folder name</legend>
<div class="row">
<label for="folder-type-new" class="caption">
<input type="radio" name="folder-type" id="folder-type-new" checked="checked" /> New
folder </label>
<input type="text" id="folderNameTextBox" value="" class="folder-name"/>
</div>
<div class="row disabled">
<label for="folder-type-existing" class="caption">
<input type="radio" name="folder-type" id="folder-type-existing" /> Existing
folder </label>
<select id="folderNameDropDownList" class="folder-name" disabled="disabled">
<?php foreach ($dirs as $dir) : ?>
<option><?php echo htmlentities($dir, NULL, 'UTF-8'); ?></option>
<?php endforeach; ?>
</select>
</div>
</fieldset>
<div class="code">
<p>
<?php
require_once "ImageUploaderPHP/Uploader.class.php";
// create Uploader object and specify its ID and size
$uploader = new Uploader("Uploader1");
$uploader->setWidth("650px");
$uploader->setHeight("305px");
// specify a license key
$uploader->setLicenseKey("76FF4-004AB-C5AE7-18E71-8E64B-8AE3F0");
$uploader->setScriptsDirectory ('ImageUploaderPHP/Scripts');
$uploader->getJavaControl()->setCodeBase ('ImageUploaderPHP/Scripts/ImageUploader7.jar');
$uploader->getActiveXControl()->setCodeBase ('ImageUploaderPHP/Scripts/ImageUploader7.cab');
// configure upload settings
$uploader->getUploadSettings()->setActionUrl("upload.php");
$uploader->getUploadSettings()->setRedirectUrl('gallery.php');
//setting folder pane height
$uploader->getFolderPane()->setHeight("250");
// setting view mode of Folder & Upload pane
$uploader->getFolderPane()->setViewMode('Tiles');
$uploader->getUploadPane()->setViewMode('Tiles');
// setting of file restrictions
$uploader->getRestrictions()->setFileMask('*.jpg;*.jpeg;*.png;*.bmp;*.gif');
$uploader->getRestrictions()->setEnableCmyk(true);
$uploader->getRestrictions()->setMaxFileCount(10);
$uploader->getMessages()->setMaxFileCountExceeded("I'm sorry, the number of files you have selected for this upload session exceed the 10 file limit.");
$uploader->getRestrictions()->setMaxTotalFileSize(10485760);
$uploader->getMessages()->setMaxTotalFileSizeExceeded("I'm sorry, the number of files that you have selected for this upload session exceed the 10MB limit.");
$uploader->getRestrictions()->setMaxFileSize(1048576);
$uploader->getRestrictions()->setDeniedFileMask("*.exe;*.bat;*.cmd;*.wsf");
/* Configure converters */
//Main converter
$converter1 = new Converter();
$converter1->setMode('*.*=SourceFile');
$converter1->setThumbnailWidth(700);
$converter1->setThumbnailHeight(700);
$converter1->setThumbnailFitMode("Fit");
$converter1->setThumbnailApplyCrop(true);
//Converter for gallery
$converter2 = new Converter();
$converter2->setMode('*.*=Thumbnail');
$converter2->setThumbnailWidth(120);
$converter2->setThumbnailHeight(120);
$uploader->setConverters(array(
$converter1,
$converter2
));
$uploader->getDetailsViewColumns()->setDimensionsText('');
$uploader->getClientEvents()->setBeforeUpload('onBeforeUpload');
require_once 'ImageUploaderPHP/InstallationProgress.class.php';
$ip = new InstallationProgress($uploader);
$ip->setProgressImageUrl('Images/installation_progress.gif');
$ip->setProgressCssClass('ip-progress');
$ip->setInstructionsCssClass('ip-instructions');
$uploader->render();
?>
</p>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
gallery.php Code:<!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">
<?php
//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.
$galleryPath = 'UploadedFiles/';
$thumbnailsPath = $galleryPath . 'Thumbnails/';
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$descriptions = new DOMDocument('1.0');
$descriptions->load($absGalleryPath . 'files.xml');
?>
<head>
<title><?php echo DemoData::getPageTitle(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="Libraries/fancybox/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<script src="Libraries/jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Libraries/fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { $('a.fancybox').fancybox(); });
</script>
</head>
<body>
<form id="form1" class="page">
<div id="container">
</div>
<div id="center">
<div class="aB">
<div class="aB-B">
<?php if ('Uploaded files' != $current['title']) :?>
<?php endif;?>
<div class="demo">
<div class="inner">
<div class="container">
<div class="gallery">
<ul class="gallery-image-list">
<?php for ($i = 0; $i < $descriptions->documentElement->childNodes->length; $i++) :
$xmlFile = $descriptions->documentElement->childNodes->item($i);
$name = htmlentities($xmlFile->getAttribute('name'), ENT_COMPAT, 'UTF-8');
$source = $galleryPath . rawurlencode($xmlFile->getAttribute('source'));
$thumbnail = $thumbnailsPath . rawurlencode($xmlFile->getAttribute('thumbnail'));
?>
<li class="item">
<a class="fancybox" target="_blank" rel="original" href="<?php echo $source; ?>"><img class="preview"
alt="<?php echo $name; ?>" title="<?php echo $name; ?>" src="<?php echo $thumbnail; ?>" />
</a>
</li>
<?php endfor; ?>
</ul>
</div>
</div>
</div>
</div>
<ul class="tabs">
<li class="selected"><span>Description</span></li>
</ul>
<div class="tab-containers">
<div class="tab-container">
<div class="tab-inner">
</div>
</div>
</div>
</div>
<div class="aB-a">
</div>
</div>
</div>
</div>
</form>
</body>
</html>
upload.php Code:<?php
//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.
$galleryPath = 'UploadedFiles/';
require_once 'Includes/gallery_helper.php';
require_once 'ImageUploaderPHP/UploadHandler.class.php';
/**
* FileUploaded callback function
* @param $uploadedFile UploadedFile
*/
function onFileUploaded($uploadedFile) {
global $galleryPath;
$absGalleryPath = realpath($galleryPath) . DIRECTORY_SEPARATOR;
$absThumbnailsPath = $absGalleryPath . 'Thumbnails' . DIRECTORY_SEPARATOR;
if ($uploadedFile->getPackage()->getPackageIndex() == 0 && $uploadedFile->getIndex() == 0) {
initGallery($absGalleryPath, $absThumbnailsPath, FALSE);
}
$dirName = $_POST['folder'];
$dirName = preg_replace('/[^a-z0-9_\-\.()\[\]{}]/i', '_', $dirName);
if (!is_dir($absGalleryPath . $dirName)) {
mkdir($absGalleryPath . $dirName, 0777);
}
$path = rtrim($dirName, '/\\') . '/';
$originalFileName = $uploadedFile->getSourceName();
$files = $uploadedFile->getConvertedFiles();
// Save converter 1
$sourceFile = $files[0];
/* @var $sourceFile ConvertedFile */
if ($sourceFile) {
$sourceFileName = getSafeFileName($absGalleryPath . $path, $originalFileName);
$sourceFile->moveTo($absGalleryPath . $path . $sourceFileName);
}
// Save converter2
$sourceFile = $files[1];
if ($sourceFile) {
$sourceFileName = getSafeFileName($absThumbnailsPath, $originalFileName);
$sourceFile->moveTo($absThumbnailsPath . $sourceFileName);
}
//Load XML file which will keep information about files (image dimensions, description, etc).
//XML is used solely for brevity. In real-life application most likely you will use database instead.
$descriptions = new DOMDocument('1.0', 'utf-8');
$descriptions->load($absGalleryPath . 'files.xml');
//Save file info.
$xmlFile = $descriptions->createElement('file');
$xmlFile->setAttribute('name', $_POST['folder'] . '/' . $originalFileName);
$xmlFile->setAttribute('source', $path . $sourceFileName);
$xmlFile->setAttribute('description', $uploadedFile->getDescription());
$xmlFile->setAttribute('size', $uploadedFile->getSourceSize());
$descriptions->documentElement->appendChild($xmlFile);
$descriptions->save($absGalleryPath . 'files.xml');
}
$uh = new UploadHandler();
$uh->setFileUploadedCallback('onFileUploaded');
$uh->processRequest();
I can select, and save the the correct files and folders along with the thumbnail images. The problem I'm having is that I can't retrieve the thumbnaisl to populate my gallery page, in fact the screen is blank. I've tried several combinations of the code checking this against the documentation, but I just can't find the answer. I just wondered whether someone could perhaps take a look at this and let me know where I've gone wrong. For information, my folder structure is /UploadedFiles/Thumbnails and the 'files.xml' file and Images folders are stored within the 'UploadedFiles' folder. Many thanks and kind regards
|