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 );
}