Image chooser with preview in form in Elefant

images.html

<!-- apps/demo/views/images.html -->

{! filemanager/util/browser !}

<form method="post" id="{{_form}}">

<p>
	<input type="submit" id="browse" value="{"Choose an image"}" />
	<input type="hidden" name="image" id="image" value="{{image|quotes}}" />
</p>

<p>
	{"Preview"}:<br />
	<img src="/apps/admin/css/admin/spacer.png" id="preview" />
</p>

<p><input type="submit" value="{"Submit"}" /></p>

</form>

<style>
#preview {
	width: 150px;
	height: 90px;
	border: 1px solid #ccc;
}
</style>

<script>
$(function () {
	$('#browse').click (function () {
		$.filebrowser ({
			thumbs: true,
			title: '{"Choose an image"}',
			set_value: '#image',
			callback: function (file) {
				$('#preview').attr ('src', file);
			}
		});
		return false;
	});
});
</script>

images.php

<?php // apps/demo/handlers/images.php

$this->require_admin ();

$page->layout = 'admin';
$page->title = __ ('Image Chooser Example');

$form = new Form ('post', $this);

echo $form->handle (function ($form) use ($page) {
	$page->title = __ ('Your Image:');
	printf ('<p><img src="%s" /></p>', $_POST['image']);
});

?>