Standalone integration

This example shows how the MCImageManager can be used as a standalone file selector. It shows the usage of various configuration options.

HTML source

Below is all you need to setup the example.

<script type="text/javascript" src="<your installation path>/js/mcimagemanager.js"></script>

<form method="post" action="dump.php">
	<h4>Absolute URL</h4>
	<p>
		<input id="url_abs" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_abs'});">[Pick file]</a>
	</p>

	<h4>Relative URL</h4>
	<p>
		<input id="url_rel" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_rel', relative_urls : true});">[Pick file]</a>
	</p>

	<h4>Relative URL from a specific location</h4>
	<p>
		<input id="url_rel_loc" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_rel_loc', relative_urls : true, document_base_url : '/'});">[Pick file]</a>
	</p>

	<h4>Absolute URL without host</h4>
	<p>
		<input id="url_abs_nohost" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_abs_nohost', no_host : true});">[Pick file]</a>
	</p>

	<h4>Specify default path</h4>
	<p>
		<input id="url_path" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_path', path : '{0}/moreimages'});">[Pick file]</a>
	</p>

	<h4>Specify rootpath</h4>
	<p>
		<input id="url_root" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_root', rootpath : '{0}/moreimages'});">[Pick file]</a>
	</p>

	<h4>Remember last path</h4>
	<p>
		<input id="url_remember" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_remember', remember_last_path : true});">[Pick file]</a>
	</p>

	<h4>Filtered file selection</h4>
	<p>
		<input id="url_filtered" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_filtered', extensions:'jpg', exclude_file_pattern:'/^dog/'});">[Pick file]</a>
	</p>

	<h4>Custom insert_filter function</h4>
	<p>
		<script type="text/javascript">
			function filterFunc(file) {
				file.url = file.url.toUpperCase(); // Converts the URL to uppercase
			}
		</script>

		<input id="url_filtered2" style="width:400px" />
		<a href="javascript:;" onclick="mcImageManager.browse({fields : 'url_filtered2', insert_filter : filterFunc});">[Pick file]</a>
	</p>

	<h4>Custom insert function</h4>
	<p>
		<script type="text/javascript">
			function customInsert(data) {
				alert('Focused file: ' + data.focusedFile.url + ", Size: " + data.focusedFile.size);
			}
		</script>

		<a href="javascript:;" onclick="mcImageManager.browse({oninsert : customInsert});">[Pick file]</a>
	</p>
</form>