Multi-image selection demo in Elefant. Generate an app via `./elefant crud-app listing id name description images` and this replaces the add.html view.

add.html

{! filemanager/util/browser !}

<script>
$(function () {
  // Get the image list from the hidden field
	function get_images () {
		var images = $('#images').val ();
		
		if (images.length === 0) {
			return [];
		}
		
		if (images.match ('|')) {
			return images.split ('|');
		}
		
		return [images];
	}

	// Store the image list back in the hidden field
	function set_images (images) {
		$('#images').val (images.join ('|'));
	}

	// Add an image from the chooser
	function add_image (file) {
		var images = get_images ();
		
		// avoid duplicate selection
		if ($.inArray (file, images) !== -1) {
			return;
		}

		images.push (file);

		set_images (images);
		update_preview (images);
	}

	// Remove an image when it's been clicked
	function remove_image () {
		var file = $(this).attr ('src'),
			images = get_images ();

		while (images.indexOf (file) !== -1) {
			images.splice (images.indexOf (file), 1);
		}

		set_images (images);
		update_preview (images);
	}

	// Update the preview of the images
	function update_preview (images) {
		var prev = $('#images-preview');
		prev.html ('');
		for (var i in images) {
			prev.append (
				$('<img>')
					.attr ('src', images[i])
					.attr ('title', '{"Click to remove"}')
					.click (remove_image)
			);
		}
	}

	$('#browse').click (function () {
		$.filebrowser ({
			thumbs: true,
			callback: add_image
		});
		return false;
	});
});
</script>

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

<p>
	{"Name"}:<br />
	<input type="text" name="name" value="{{ name|quotes }}" />
	<span class="notice" id="name-notice">{"Please enter a name."}</span>
</p>

<p>
	{"Description"}:<br />
	<textarea name="description" cols="70" rows="4">{{ description }}</textarea>
	<span class="notice" id="description-notice">{"Please enter a description."}</span>
</p>

<p>
	{"Images"}:
	<span class="notice" id="images-notice">{"Please select at least one image."}</span><br />
	<span id="images-preview" class="clearfix"></span><br />
	<input type="submit" id="browse" value="{"Browse"}" />
	<input type="hidden" name="images" id="images" value="{{ images|quotes }}" />
</p>


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

</form>

<style>
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

#images-preview {
	border: 1px solid #ccc;
	min-height: 52px;
	width: 400px;
	padding: 5px 5px 0px 5px;
	margin-bottom: 2px;
}

#images-preview img {
	float: left;
	width: 50px;
	height: 50px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: 1px solid #999;
}

#images-preview img:hover {
	cursor: pointer;
}
</style>