Popup Mode

The popup mode is most suitable for selecting files that are stored on a server.
Click the button below to open the popup and choose any file. After that you will see basic information about the file that was selected, including the URL.

Additionally, CKFinder supports a special file selection mode for images called Choose Resized. This feature allows you to resize the selected image to any size that is suitable for you. The CKFinder connector will automatically create a resized version of the image and return its URL.

Multiple Popups

In some cases you may need more than one popup to handle multiple places that require selecting a file. Below you can find an example that fills each of the inputs with the URL of the selected file.

var button1 = document.getElementById( 'ckfinder-popup-1' );
var button2 = document.getElementById( 'ckfinder-popup-2' );

button1.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-1' );
};
button2.onclick = function() {
	selectFileWithCKFinder( 'ckfinder-input-2' );
};

function selectFileWithCKFinder( elementId ) {
	CKFinder.popup( {
		chooseFiles: true,
		width: 800,
		height: 600,
		onInit: function( finder ) {
			finder.on( 'files:choose', function( evt ) {
				var file = evt.data.files.first();
				var output = document.getElementById( elementId );
				output.value = file.getUrl();
			} );

			finder.on( 'file:choose:resizedImage', function( evt ) {
				var output = document.getElementById( elementId );
				output.value = evt.data.resizedUrl;
			} );
		}
	} );
}