How to choose an image from the server?

ivanhaentjens · Post by **ivanhaentjens** » Wed Oct 16, 2013 5:39 pm

Can somebody help me out please?

I have a VARCHAR field, assigned as image / fileupload in PHPmaker.

How can I make it open a list of available images on the server, instead of the default 'Browse' button?

The images are already on the server, not on the local pc of the end user.

Kind of central media manager (Joomla) idea.

Tx,
Ivan

ivanhaentjens · Post by **ivanhaentjens** » Fri Oct 18, 2013 3:43 am

Finally I worked out a solution. I wrote some javascript to change the default behavior of the browse button to open the CKFile manager

install CKFinder with the right configurations
Add this code in your header.php file, just before the closing head tag, and all 'file' fields will now work with CKFinder
Adjust the paths to jquery and ckfinder.js

NOTE: I didn't check on the 'edit' page yet. Only the 'add' page. Any help to make this better is welcome!

// function to open the CKfinder popup

function BrowseServer(currentfieldid)
{
	
	var finder = new CKFinder();
	finder.basePath = '/ckfinder/';	// The path for the installation of CKFinder (default = "/ckfinder/").
	finder.selectActionFunction = SetFileField;
	finder.popup();
	
	// set global variable so CKFinder knows which field it has to update
	
	window.currentField = currentfieldid;
	
}

// function which is called when a file is double clicked in CKFinder: get the file url and put the path in the right form field

function SetFileField( fileUrl )
{
	document.getElementById( window.currentField ).value = fileUrl;
}

// 1. add a CKFinder 'browse button'
// 2. change fieldtype to text (instead of the default 'file' type, as generated by PHPmaker).

$( document ).ready(function() {
			
			window.currentField = '';
			
			$('input:file').each(function() {
				
				var currentfieldid = $(this).attr("id");
				var fieldvalue = $(this).value;
				
				// 1. add the new browse button with ckfinder behaviour
				
				$('<input type="button" value="Browse server for '+currentfieldid+'" onClick="BrowseServer(\''+currentfieldid+'\');" />').insertAfter(this);
				
				// 2. change input field type to 'text' instead of 'file' , to get it working with CKFinder
				// Solution with IE fix: clone field (DOM element), set attributes of new field, delete original field
				
						var oldField = $(this);
						var newField = oldField.clone();
					
						newField.attr("type", "text");
						newField.attr("id", currentfieldid);
						newField.attr("name", currentfieldid);
						newField.attr("size", 40);
						newField.value = fieldvalue;
						newField.insertBefore(oldField);
						oldField.remove();
				
			});

});

</script>

ivanhaentjens · Post by **ivanhaentjens** » Fri Oct 18, 2013 5:09 am

It's all working now. I'm using phpmaker10.

install CKFinder
Give your fields you want to use with CKFinder a specific naming like foto1, foto2, foto3
Set these fields to image (view tag) / text field (edit tag) (not file! we're not going to upload anything)
Insert the code below in header.php, just before the closing head tag
Change $("name*='foto') to the naming you choose. This example will look for all fields that have 'foto' in their naming, like foto1, foto2, ...
change the paths to you jquery and ckfinder files (first two lines)

the code:

// function to open the CKfinder popup

function BrowseServer(currentfieldid)
{

var finder = new CKFinder();
finder.basePath = '/ckfinder/'; // The path for the installation of CKFinder (default = "/ckfinder/").
finder.selectActionFunction = SetFileField;
finder.popup();

// set global variable so CKFinder knows which field it has to update

window.currentField = currentfieldid;

}

// function which is called when a file is double clicked in CKFinder: get the file url and put the path in the right form field

function SetFileField( fileUrl )
{
document.getElementById( window.currentField ).value = fileUrl;
}

// 1. add a CKFinder 'browse button'
// 2. change fieldtype to text (instead of the default 'file' type, as generated by PHPmaker).

$( document ).ready(function() {

window.currentField = '';

$("[name*='foto']").each(function() {

var currentfieldid = $(this).attr("id");
var fieldvalue = $(this).value;

// 1. add the new browse button with ckfinder behaviour

$('<input type="button" value="Browse server" onClick="BrowseServer(\''+currentfieldid+'\');" />').insertAfter(this);

});

</script>