Uploading of new photos now fully working.

This commit is contained in:
Aaron van Geffen 2016-09-04 14:15:38 +02:00
parent 77a9cd5d53
commit 790d5fc5d0
5 changed files with 81 additions and 32 deletions

View File

@ -14,45 +14,44 @@ class UploadMedia extends HTMLController
if (!Registry::get('user')->isAdmin()) if (!Registry::get('user')->isAdmin())
throw new NotAllowedException(); throw new NotAllowedException();
$page = new MediaUploader(); if (!isset($_REQUEST['tag']))
parent::__construct('Upload new media - ' . SITE_TITLE); throw new UserFacingException('No album tag provided.');
$tag = Tag::fromId($_REQUEST['tag']);
$page = new MediaUploader($tag);
parent::__construct('Upload new photos - ' . SITE_TITLE);
$this->page->adopt($page); $this->page->adopt($page);
// Are we saving something? // Are we saving something?
if (isset($_POST['save'])) if (!empty($_FILES['uploads']))
{ {
if (empty($_FILES) || empty($_FILES['new_asset'])) $files = isset($_FILES['uploads'][0]) ? $_FILES['uploads'] : [$_FILES['uploads']];
return; $new_ids = [];
foreach ($files as $num => $uploaded_file)
// Any tags?
$new_tags = [];
if (isset($_POST['tag']) && is_array($_POST['tag']))
{
foreach ($_POST['tag'] as $id_tag => $bool)
if (is_numeric($id_tag))
$new_tags[] = $id_tag;
}
var_dump($_FILES);
var_dump($_POST);
foreach ($_FILES['new_asset']['tmp_name'] as $num => $uploaded_file)
{ {
if (empty($uploaded_file)) if (empty($uploaded_file))
continue; continue;
$asset = Asset::createNew([ $asset = Asset::createNew([
'filename_to_copy' => $uploaded_file, 'filename_to_copy' => $uploaded_file['tmp_name'],
'preferred_filename' => $_FILES['new_asset']['name'][$num], 'preferred_filename' => $uploaded_file['name'],
'title' => !empty($_POST['title'][$num]) ? $_POST['title'][$num] : null,
]); ]);
$asset->linkTags($new_tags); $new_ids[] = $asset->getId();
$asset->linkTags([$tag->id_tag]);
} }
// Prevent uploading twice. if (isset($_REQUEST['format']) && $_REQUEST['format'] === 'json')
{
echo json_encode(['success' => true, 'new_ids' => $new_ids]);
exit;
}
else
{
header('Location: ' . BASEURL . '/uploadmedia/'); header('Location: ' . BASEURL . '/uploadmedia/');
exit; exit;
} }
} }
}
} }

View File

@ -194,7 +194,7 @@ class Asset
unset($image); unset($image);
$exif = EXIF::fromFile($destination); $exif = EXIF::fromFile($destination);
$date_captured = intval($exif->created_timestamp); $date_captured = $exif->created_timestamp > 0 ? $exif->created_timestamp : time();
} }
$db = Registry::get('db'); $db = Registry::get('db');

View File

@ -694,6 +694,9 @@ a#previous_photo:hover, a#next_photo:hover {
height: 5px; height: 5px;
width: 0%; width: 0%;
} }
#upload_preview_area .progress .error {
background: #b22;
}
/* Spinner animation /* Spinner animation
----------------------*/ ----------------------*/

View File

@ -2,6 +2,7 @@ function UploadQueue(options) {
this.queue = options.queue_element; this.queue = options.queue_element;
this.preview_area = options.preview_area; this.preview_area = options.preview_area;
this.upload_progress = []; this.upload_progress = [];
this.upload_url = options.upload_url;
this.submit = options.submit_button; this.submit = options.submit_button;
this.addEvents(); this.addEvents();
} }
@ -69,13 +70,45 @@ UploadQueue.prototype.process = function() {
var files = this.queue.files; var files = this.queue.files;
for (var i = 0; i < files.length; i++) { for (var i = 0; i < files.length; i++) {
this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length); this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length);
this.updateProgress(i, 0.5);
var callback = (i !== files.length - 1) ? null : function() { var callback = (i !== files.length - 1) ? null : function() {
this.hideSpinner(); this.hideSpinner();
}; };
this.sendFile(files[i], i, callback);
}; };
}; };
UploadQueue.prototype.sendFile = function(file, index, callback) {
// Prepare the request.
var that = this;
var request = new XMLHttpRequest();
request.addEventListener('error', function(event) {
that.updateProgress(index, -1);
});
request.addEventListener('progress', function(event) {
that.updateProgress(index, event.loaded / event.total);
});
request.addEventListener('load', function(event) {
that.updateProgress(index, 1);
if (request.responseText !== null && request.status === 200) {
var obj = JSON.parse(request.responseText);
if (obj.error) {
alert(obj.error);
return;
}
else if (callback) {
callback.call(that, obj);
}
}
});
var data = new FormData();
data.append('uploads', file, file.name);
request.open('POST', this.upload_url, true);
request.send(data);
};
UploadQueue.prototype.addProgressBar = function(index) { UploadQueue.prototype.addProgressBar = function(index) {
if (index in this.upload_progress) { if (index in this.upload_progress) {
return; return;
@ -99,7 +132,15 @@ UploadQueue.prototype.updateProgress = function(index, progress) {
} }
var bar = this.upload_progress[index]; var bar = this.upload_progress[index];
if (progress >= 0) {
bar.style.width = Math.ceil(progress * 100) + '%'; bar.style.width = Math.ceil(progress * 100) + '%';
} else {
bar.style.width = "";
if (progress === -1) {
bar.className = "error";
}
}
}; };
UploadQueue.prototype.showSpinner = function(sibling, label) { UploadQueue.prototype.showSpinner = function(sibling, label) {

View File

@ -8,11 +8,16 @@
class MediaUploader extends SubTemplate class MediaUploader extends SubTemplate
{ {
public function __construct(Tag $tag)
{
$this->tag = $tag;
}
protected function html_content() protected function html_content()
{ {
echo ' echo '
<form action="" class="admin_box" method="post" enctype="multipart/form-data"> <form action="', BASEURL, '/uploadmedia/?tag=', $this->tag->id_tag, '" class="admin_box" method="post" enctype="multipart/form-data">
<h2>Upload new photos</h2> <h2>Upload new photos to &quot;', $this->tag->tag, '&quot;</h2>
<div> <div>
<h3>Select files</h3> <h3>Select files</h3>
<input type="file" id="upload_queue" name="uploads[]" multiple> <input type="file" id="upload_queue" name="uploads[]" multiple>
@ -29,7 +34,8 @@ class MediaUploader extends SubTemplate
var upload_queue = new UploadQueue({ var upload_queue = new UploadQueue({
queue_element: document.getElementById("upload_queue"), queue_element: document.getElementById("upload_queue"),
preview_area: document.getElementById("upload_preview_area"), preview_area: document.getElementById("upload_preview_area"),
submit_button: document.querySelector("input[type=submit]") submit_button: document.querySelector("input[type=submit]"),
upload_url: "', BASEURL, '/uploadmedia/?format=json&tag=', $this->tag->id_tag, '"
}); });
}, 100); }, 100);
</script>'; </script>';