pics/templates/MediaUploader.php

<?php
/*****************************************************************************
 * MediaUploader.php
 * Contains the media uploading template.
 *
 * Kabuki CMS (C) 2013-2015, Aaron van Geffen
 *****************************************************************************/

class MediaUploader extends SubTemplate
{
	protected function html_content()
	{
		echo '
			<form action="" class="admin_box" method="post" enctype="multipart/form-data">
				<h2>Upload new media</h2>
				<div>
					<h3>Select files</h3>
					<ul>
						<li>
							<input type="file" name="new_asset[0]"><br>
							<input type="text" name="title[0]" placeholder="Custom title (optional)" size="50">
						</li>
						<li>
							<input type="file" name="new_asset[1]"><br>
							<input type="text" name="title[1]" placeholder="Custom title (optional)" size="50">
						</li>
						<li>
							<input type="file" name="new_asset[2]"><br>
							<input type="text" name="title[2]" placeholder="Custom title (optional)" size="50">
						</li>
					</ul>
				</div>
				<div>
					<h3>Link tags</h3>
					<ul id="tag_list">
						<li id="new_tag_container"><input type="text" id="new_tag" placeholder="Type to link a new tag"></li>
					</ul>
				</div>
				<script type="text/javascript" src="', BASEURL, '/js/ajax.js"></script>
				<script type="text/javascript" src="', BASEURL, '/js/autosuggest.js"></script>
				<script type="text/javascript">
					setTimeout(function() {
						var tag_autosuggest = new TagAutoSuggest({
							inputElement: "new_tag",
							listElement: "tag_list",
							baseUrl: "', BASEURL, '",
							appendCallback: function(item) {
								if (document.getElementById("linked_tag_" + item.id_tag)) {
									return;
								}

								var newCheck = document.createElement("input");
								newCheck.type = "checkbox";
								newCheck.name = "tag[" + item.id_tag + "]";
								newCheck.id = "linked_tag_" + item.id_tag;
								newCheck.title = "Uncheck to delete";
								newCheck.checked = "checked";

								var newNode = document.createElement("li");
								newNode.appendChild(newCheck);

								var newLabel = document.createTextNode(item.label);
								newNode.appendChild(newLabel);

								var list = document.getElementById("tag_list");
								var input = document.getElementById("new_tag_container");
								list.insertBefore(newNode, input);
							}
						});
					}, 100);
				</script>
				<div>
					<input name="save" type="submit" value="Upload the lot">
				</div>
			</form>';
	}
}