Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
IRHM73  
#1 Posted : Friday, March 2, 2012 7:37:29 AM(UTC)
IRHM73

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 &rarr; <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" />&nbsp;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" />&nbsp;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
Dmitry.Obukhov  
#2 Posted : Monday, March 5, 2012 1:29:38 AM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Hi Chris,

I attached the sample application with the edited gallery.php file. This file allows to show uploaded folders with files which are located inside of them. Please download and try it out.
File Attachment(s):
iu7_FolderGallery.zip (4,491kb) downloaded 8 time(s).
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
IRHM73  
#3 Posted : Monday, March 5, 2012 5:54:01 AM(UTC)
IRHM73

Rank: Member

Groups: Member
Joined: 2/13/2012(UTC)
Posts: 21

Thanks: 1 times
Hi Dmitry, many thanks for the example which you sent.

Apologies, I perhaps didn't explain myself properly in my original post. I can create the 'gallery' file which allows the user to open the folder heirachy and view the files within each folder.

However, want I want to do is create another gallery file whereby the user can see all of their saved images irrespective of the folder they are contained within. Because I have a'thumbnails' folder I saw this as the source directory to be able to use to do this.

Many thanks once again, kind regards

Chris
Dmitry.Obukhov  
#4 Posted : Tuesday, March 6, 2012 1:45:15 AM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
Hello Chris,

I would like to recommend you to use the second gallery file where all uploaded files (from Thumbnails/ folder) will be showed. Please look at my attached sample.
File Attachment(s):
iu7_ShowAllFiles.zip (4,492kb) downloaded 6 time(s).
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
IRHM73  
#5 Posted : Tuesday, March 6, 2012 6:11:24 AM(UTC)
IRHM73

Rank: Member

Groups: Member
Joined: 2/13/2012(UTC)
Posts: 21

Thanks: 1 times
Hi Dmitry, once again, you customer service is 1st class. Thank you so much for the help you've given me.

I made some very minor tweaks, but it works absolutely great. It's through the support that you given me that I've now decided to buy the product.

Once again sincere thanks and kind regards

Chris
Dmitry.Obukhov  
#6 Posted : Tuesday, March 6, 2012 7:12:47 PM(UTC)
Dmitry.Obukhov

Rank: Advanced Member

Groups: Member
Joined: 5/29/2010(UTC)
Posts: 1,310

Thanks: 8 times
Was thanked: 111 time(s) in 111 post(s)
You are welcome, Chris :)
Best regards,
Dmitry Obukhov
Technical Support. Aurigma, Inc.
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.