Public/pics
2
2
Fork 2
Code Issues 6 Pull Requests 2 Releases Wiki Activity

WIP: new photo uploader.

Browse Source
This commit is contained in:
Aaron van Geffen 2016-09-04 11:54:17 +02:00
parent f96ab144ef
commit 6aaa21b176
2 changed files with 51 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/js/upload_queue.js Normal file
View File

@ -0,0 +1,38 @@
function UploadQueue(options) {
this.queue = options.queue_element;
this.previews = options.preview_area;
this.addEvents();
}
UploadQueue.prototype.addEvents = function() {
var that = this;
that.queue.addEventListener('change', function() {
that.clearArea();
for (var i = 0; i < that.queue.files.length; i++) {
that.addPreviewForFile(that.queue.files[i]);
};
});
};
UploadQueue.prototype.clearArea = function() {
this.previews.innerHTML = '';
}
UploadQueue.prototype.addPreviewForFile = function(file) {
if (!file) {
return false;
}
var preview = document.createElement('img');
preview.id = ''
preview.style.maxWidth = '150px';
preview.style.maxHeight = '150px';
var reader = new FileReader();
var that = this;
reader.addEventListener('load', function() {
preview.src = reader.result;
that.previews.appendChild(preview);
}, false);
reader.readAsDataURL(file);
};

67
templates/MediaUploader.php
View File

@ -12,66 +12,25 @@ class MediaUploader extends SubTemplate
{
echo '
<form action="" class="admin_box" method="post" enctype="multipart/form-data">
<h2>Upload new media</h2>
<h2>Upload new photos</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>
<input type="file" id="upload_queue" name="uploads[]" multiple>
</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 id="upload_preview_area">
</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>';
</form>
<script type="text/javascript" src="', BASEURL, '/js/upload_queue.js" defer="defer"></script>
<script type="text/javascript" defer="defer">
setTimeout(function() {
var upload_queue = new UploadQueue({
queue_element: document.getElementById("upload_queue"),
preview_area: document.getElementById("upload_preview_area"),
});
}, 100);
</script>';
}
}