electricdusk/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

Implement upload throttling: one file at a time.

Browse Source
This commit is contained in:
Aaron van Geffen 2016-09-04 14:39:21 +02:00
parent 790d5fc5d0
commit ddcc28aff6
3 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/default.css
View File

@ -697,6 +697,11 @@ a#previous_photo:hover, a#next_photo:hover {
#upload_preview_area .progress .error { #upload_preview_area .progress .error {
background: #b22; background: #b22;
} }
#photo_submit:disabled {
background: #ccc;
color: #777;
border-color: #aaa;
}
/* Spinner animation /* Spinner animation
----------------------*/ ----------------------*/

28
public/js/upload_queue.js
View File

@ -15,6 +15,7 @@ UploadQueue.prototype.addEvents = function() {
for (var i = 0; i < that.queue.files.length; i++) { for (var i = 0; i < that.queue.files.length; i++) {
var callback = (i !== that.queue.files.length - 1) ? null : function() { var callback = (i !== that.queue.files.length - 1) ? null : function() {
that.hideSpinner(); that.hideSpinner();
that.submit.disabled = false;
}; };
that.addPreviewForFile(that.queue.files[i], i, callback); that.addPreviewForFile(that.queue.files[i], i, callback);
}; };
@ -23,10 +24,13 @@ UploadQueue.prototype.addEvents = function() {
e.preventDefault(); e.preventDefault();
that.process(); that.process();
}); });
this.submit.disabled = true;
}; };
UploadQueue.prototype.clearPreviews = function() { UploadQueue.prototype.clearPreviews = function() {
this.preview_area.innerHTML = ''; this.preview_area.innerHTML = '';
this.submit.disabled = true;
this.current_upload_index = -1;
} }
UploadQueue.prototype.addPreviewForFile = function(file, index, callback) { UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
@ -67,16 +71,24 @@ UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
UploadQueue.prototype.process = function() { UploadQueue.prototype.process = function() {
this.showSpinner(this.submit, "Preparing to upload files..."); this.showSpinner(this.submit, "Preparing to upload files...");
var files = this.queue.files; if (this.queue.files.length > 0) {
for (var i = 0; i < files.length; i++) { this.submit.disabled = true;
this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length); this.nextFile();
var callback = (i !== files.length - 1) ? null : function() { }
this.hideSpinner();
};
this.sendFile(files[i], i, callback);
};
}; };
UploadQueue.prototype.nextFile = function() {
var files = this.queue.files;
var i = ++this.current_upload_index;
if (i === files.length) {
this.hideSpinner();
} else {
this.setSpinnerLabel("Uploading file " + (i + 1) + " out of " + files.length);
this.sendFile(files[i], i, function() {
this.nextFile();
});
}
};
UploadQueue.prototype.sendFile = function(file, index, callback) { UploadQueue.prototype.sendFile = function(file, index, callback) {
// Prepare the request. // Prepare the request.

6
templates/MediaUploader.php
View File

@ -16,14 +16,14 @@ class MediaUploader extends SubTemplate
protected function html_content() protected function html_content()
{ {
echo ' echo '
<form action="', BASEURL, '/uploadmedia/?tag=', $this->tag->id_tag, '" class="admin_box" method="post" enctype="multipart/form-data"> <form action="', BASEURL, '/uploadmedia/?tag=', $this->tag->id_tag, '" class="boxed_content" method="post" enctype="multipart/form-data">
<h2>Upload new photos to &quot;', $this->tag->tag, '&quot;</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>
</div> </div>
<div> <div>
<input name="save" type="submit" value="Upload the lot"> <input name="save" id="photo_submit" type="submit" value="Upload the lot">
</div> </div>
<div id="upload_preview_area"> <div id="upload_preview_area">
</div> </div>
@ -34,7 +34,7 @@ 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.getElementById("photo_submit"),
upload_url: "', BASEURL, '/uploadmedia/?format=json&tag=', $this->tag->id_tag, '" upload_url: "', BASEURL, '/uploadmedia/?format=json&tag=', $this->tag->id_tag, '"
}); });
}, 100); }, 100);