browse.php

I modified the browse.php script from phpnuke to handle image browsing and uploading from fckEditor. Here is the code. I may retrofit it to handle the creation and browsing of subdirectories and will post it if I do. Enjoy.

############################
# code begin
############################

<?php
/*
 * FCKeditor - The text editor for internet
 * Copyright (C) 2003-2004 Frederico Caldeira Knabben
 *
 * Licensed under the terms of the GNU Lesser General Public License
 * (http://www.opensource.org/licenses/lgpl-license.php)
 *
 * For further information go to <a href="http://www.fredck.com/FCKeditor/" target="_blank">http://www.fredck.com/FCKeditor/</a> 
 * or contact <a href="mailto:fckeditor@fredck.com" target="_new">fckeditor@fredck.com</a>.
 *
 * browse.php: Browse function.
 *
 * Authors:
 *   Frederic TYNDIUK (http://www.ftls.org/ - tyndiuk[at]ftls.org)
 */

// Init var :
$IMAGES_BASE_URL = '/imageuploads/';
$IMAGES_BASE_DIR = $_SERVER['DOCUMENT_ROOT'].$IMAGES_BASE_URL;
$IMAGE_MAX_DISPLAY_WIDTH = 300;
// End int var

// Thanks : php dot net at phor dot net
function walk_dir($path) {
    if ($dir = opendir($path)) {
        while (false !== ($file = readdir($dir))) {
            if ($file[0]==".") continue;
            if (is_dir($path."/".$file))
                $retval = array_merge($retval,walk_dir($path."/".$file));
            else if (is_file($path."/".$file))
                $retval[]=$path."/".$file;
            }
        closedir($dir);
        }
    return $retval;
}

function CheckImgExt($filename) {
    $img_exts = array("gif","jpg", "jpeg","png");
    foreach($img_exts as $this_ext) {
        if (preg_match("/\.$this_ext$/", strtolower($filename))) {
            return TRUE;
        }
    }
    return FALSE;
}

###################################################################################
# process uploaded files
###################################################################################
if(isset($_REQUEST['FCKeditor_Upload'])) {
    if (file_exists($IMAGES_BASE_DIR.$_FILES['FCKeditor_File']['name']) &&
        !empty($_FILES['FCKeditor_File']['name'])) {
        $fck_errMsg = "Error : File ".$_FILES['FCKeditor_File']['name']." exists, can't overwrite it...";
    } else {
        if (is_uploaded_file($_FILES['FCKeditor_File']['tmp_name'])) { //if file is uploaded
            $savefile = $IMAGES_BASE_DIR.$_FILES['FCKeditor_File']['name'];
            if (move_uploaded_file($_FILES['FCKeditor_File']['tmp_name'], $savefile)) { //move file from tmp to upload dir
                chmod($savefile, 0666); //change perms
                list($iWidth) = getimagesize($savefile);
                $fck_loadScript = "getImage('" . $_FILES['FCKeditor_File']['name'] . "', " . $iWidth . ");";
                $fck_sucMsg = "Your image ('" . $_FILES['FCKeditor_File']['name'] . "') was successfully uploaded.";
            }
        } else { //if there were errors uploading the file
            $fck_errMsg = "Error : ";
            switch($_FILES['FCKeditor_File']['error']) {
                case 0: //no error; possible file attack!
                    $fck_errMsg .= "There was a problem with your upload.";
                    break;
                case 1: //uploaded file exceeds the upload_max_filesize directive in php.ini
                    $fck_errMsg .= "The file you are trying to upload is too big.";
                    break;
                case 2: //uploaded file exceeds the MAX_FILE_SIZE directive that was specified in the html form
                    $fck_errMsg .= "The file you are trying to upload is too big.";
                    break;
                case 3: //uploaded file was only partially uploaded
                    $fck_errMsg .= "The file you are trying upload was only partially uploaded.";
                    break;
                case 4: //no file was uploaded
                    $fck_errMsg .= "You must select an image for upload.";
                    break;
                default: //a default error, just in case!  :)
                    $fck_errMsg .= "There was a problem with your upload.";
                    break;
            }
        }
    }
}

###################################################################################
# load files from directory
###################################################################################
foreach (walk_dir($IMAGES_BASE_DIR) as $file) {
    $file = preg_replace("#//+#", '/', $file);
    $IMAGES_BASE_DIR = preg_replace("#//+#", '/', $IMAGES_BASE_DIR);
    $file = preg_replace("#$IMAGES_BASE_DIR#", '', $file);
    if (CheckImgExt($file)) {
        $files[] = $file;    //adding filenames to array
    }
}

sort($files);    //sorting array

// if file wasn't upload, meaning this is our first time, set image preview to first image
if(empty($fck_loadScript)) {
    list($iWidth) = getimagesize($IMAGES_BASE_DIR . $files[0]);
    $fck_loadScript = "getImage('" . $files[0] . "', " . $iWidth . ");";
}

// generating $html_img_lst
foreach ($files as $file) {
    $html_img_lst .= "<a href=\"javascript&#058;getImage('$file');\">$file</a><br>\n";
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>
    <head>
        <title>Image Browser</title>
        <link rel="stylesheet" type="text/css" href="/fckeditor/editor/css/fck_dialog.css">
        <script type="text/javascript" language="javascript">
            var sImagesPath  = "<?= $IMAGES_BASE_URL; ?>";
            var sActiveImage = "" ;

            function getImage(imageName, imageSize) {
                sActiveImage = sImagesPath + imageName ;
                tmpImage = new Image();
                tmpImage.src = sActiveImage;
                document.getElementById('imgPreview').src = sActiveImage;
                if((imageSize > <?= $IMAGE_MAX_DISPLAY_WIDTH ?> && imageSize != 'undefined') ||
                    tmpImage.width > <?= $IMAGE_MAX_DISPLAY_WIDTH ?>) {
                    document.getElementById('imgPreview').width = <?= $IMAGE_MAX_DISPLAY_WIDTH ?>;
                } else {
                    document.getElementById('imgPreview').width = tmpImage.width;
                }
            }

            function ok() {    
                window.opener.SetUrl(sActiveImage) ;
                window.close() ;
            }
        </script>
        <style type="text/css">
            body, td { vertical-align: top; }
            div.ImagePreviewArea { margin-top: 9px; height: 350px; overflow: auto; }
            td.errorMessageCell { height: 30px; font-weight: bold; color: #990000; }
            td.successMessageCell { height: 30px; font-weight: bold; color: #009900; }
        </style>
    </head>
    <body>
    
    <div style="font-weight: bold; font-size: 14px; margin-bottom: 13px;">
    Choose an uploaded image or upload a new image.</div>
    <table cellpadding="0" cellspacing="0" height="100%" width="100%" border="0">
    <!-- list files and preview image -->
    <tr>
    <td style="width: 50%; padding-right: 33px;">Files:
        <div class="ImagePreviewArea"><?= $html_img_lst ?></div>
    </td>
    <td style="width: 50%;">Selected Image:
        <div class="ImagePreviewArea"><IMG id="imgPreview" border="0"></div>
    </td>
    </tr>
    <!-- upload buttons -->
    <tr>
    <td colspan="2"></td>
    </tr>
    <!-- error messages goes here -->
    <? if(!empty($fck_errMsg)) { ?>
        <tr>
        <td colspan="2" class="errorMessageCell"><?= $fck_errMsg ?></td>
        </tr>
    <? } ?>
    <!-- success messages goes here -->
    <? if(!empty($fck_sucMsg)) { ?>
        <tr>
        <td colspan="2" class="successMessageCell"><?= $fck_sucMsg ?></td>
        </tr>
    <? } ?>
    <!-- approval buttons -->
    <tr>
    <td colspan="2" style="height: 60px;">
        <form name="approve" method="post" action="browse.php" enctype="multipart/form-data">
        <input type="file" name="FCKeditor_File">
        <input type="submit" name="FCKeditor_Upload" value="Upload Image"> &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="Approve Selected Image" onclick="ok();"> &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="Cancel" onclick="window.close();"></form</td>
    </tr>
    </table>
    <script type="text/javascript" language="javascript"><?= $fck_loadScript ?></script>
    </body>
</html>

###################################
# code end
###################################