Using File manager (FCKeditor)






Using File manager (FCKeditor)

I took the "file manager" from FCKeditor (http://www.fckeditor.net) and changed it a bit for my own needs.

This file manager has the ability to upload files, create and delete folders and images, filter file extensions, manage image repositories, etc.

Now if I need to upload files, I just call popup which returns the src of the chosen image. The src is a relative path which is stored in a database and files are stored in the 'imgbank/Image/' folder.

There are some changes you will need to make for your own needs, but the idea is perfect, i think.

Live Demo (I cannot show you my real demo because it's enclosed in the admin area of a custom CMS): http://dalmatech.open.net.ua/mstar/

Here is the source: http://dalmatech.open.net.ua/mstar/tmp/imgmanager/imgmanager.zip


Sample Use:


<tr>
 <td>Image:</td>
 <td><img id="image_id" width="0" border="0" align="absmiddle" hspace="5">
     <a href="#" onClick="javascript:OpenFileBrowser
     ('imgmanager/browser/default/browser.php?Type=Image&Connector=php_connector/connector.php&return_id=image_id', 600, 400);">
     Change
     </a>
     <a href="#" onClick="javascript:ClearImageURL('image_id');">Clear</a>
 </td>
 <td>
 <input type="hidden" name="image_id" value="">
 </td>
</tr>


JS functions


function ChangeImageURL( return_id, url )
{
    var image=document.getElementById(return_id);
    image.width=100;
    //image.height=50;
    //image.hspace=5;
    document.getElementById(return_id).src=url;
    image_input=document.forms['main_form'].elements[return_id];
    image_input.value=url;
    //alert( "Image Input: "+image_input);
}

function ClearImageURL( return_id )
{
    var image=document.getElementById(return_id);
    image.width=0;
    image.src="";
    image_input=document.forms['main_form'].elements[return_id];
    image_input.value=url;
    //alert( "RETURN_ID: "+return_id+" URL: "+url );
}