2016-09-04 11:54:17 +02:00
|
|
|
function UploadQueue(options) {
|
|
|
|
this.queue = options.queue_element;
|
|
|
|
this.previews = options.preview_area;
|
2016-09-04 12:45:15 +02:00
|
|
|
this.submit = options.submit_button;
|
2016-09-04 11:54:17 +02:00
|
|
|
this.addEvents();
|
|
|
|
}
|
|
|
|
|
|
|
|
UploadQueue.prototype.addEvents = function() {
|
|
|
|
var that = this;
|
|
|
|
that.queue.addEventListener('change', function() {
|
2016-09-04 12:52:59 +02:00
|
|
|
that.showSpinner(that.queue, "Generating previews (not uploading yet!)");
|
2016-09-04 12:45:15 +02:00
|
|
|
that.clearPreviews();
|
2016-09-04 11:54:17 +02:00
|
|
|
for (var i = 0; i < that.queue.files.length; i++) {
|
2016-09-04 12:45:15 +02:00
|
|
|
var callback = (i !== that.queue.files.length - 1) ? null : function() {
|
|
|
|
that.hideSpinner();
|
|
|
|
};
|
|
|
|
that.addPreviewForFile(that.queue.files[i], i, callback);
|
2016-09-04 11:54:17 +02:00
|
|
|
};
|
|
|
|
});
|
2016-09-04 12:45:15 +02:00
|
|
|
that.submit.addEventListener('click', function(e) {
|
|
|
|
e.preventDefault();
|
|
|
|
that.process();
|
|
|
|
});
|
2016-09-04 11:54:17 +02:00
|
|
|
};
|
|
|
|
|
2016-09-04 12:45:15 +02:00
|
|
|
UploadQueue.prototype.clearPreviews = function() {
|
2016-09-04 11:54:17 +02:00
|
|
|
this.previews.innerHTML = '';
|
|
|
|
}
|
|
|
|
|
2016-09-04 12:45:15 +02:00
|
|
|
UploadQueue.prototype.addPreviewForFile = function(file, index, callback) {
|
2016-09-04 11:54:17 +02:00
|
|
|
if (!file) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
var preview = document.createElement('img');
|
2016-09-04 12:45:15 +02:00
|
|
|
preview.id = 'upload_preview_' + index;
|
2016-09-04 11:54:17 +02:00
|
|
|
preview.style.maxHeight = '150px';
|
|
|
|
|
|
|
|
var reader = new FileReader();
|
|
|
|
var that = this;
|
2016-09-04 12:45:15 +02:00
|
|
|
var appendMe = function() {
|
2016-09-04 11:54:17 +02:00
|
|
|
preview.src = reader.result;
|
2016-09-04 12:45:15 +02:00
|
|
|
if (callback) {
|
|
|
|
preview.addEventListener('load', function() {
|
|
|
|
callback();
|
|
|
|
});
|
|
|
|
}
|
2016-09-04 11:54:17 +02:00
|
|
|
that.previews.appendChild(preview);
|
2016-09-04 12:45:15 +02:00
|
|
|
};
|
|
|
|
var waitForMe = function() {
|
|
|
|
var previews = that.previews.childNodes;
|
|
|
|
if (previews.length === 0 || previews[previews.length - 1].id === 'upload_preview_' + (index - 1)) {
|
|
|
|
appendMe();
|
|
|
|
} else {
|
|
|
|
setTimeout(waitForMe, 10);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
reader.addEventListener('load', waitForMe, false);
|
2016-09-04 11:54:17 +02:00
|
|
|
reader.readAsDataURL(file);
|
|
|
|
};
|
2016-09-04 12:45:15 +02:00
|
|
|
|
|
|
|
UploadQueue.prototype.process = function() {
|
|
|
|
this.showSpinner(this.submit);
|
|
|
|
alert('Should now upload ' + this.queue.files.length + " files");
|
|
|
|
};
|
|
|
|
|
2016-09-04 12:52:59 +02:00
|
|
|
UploadQueue.prototype.showSpinner = function(sibling, label) {
|
2016-09-04 12:45:15 +02:00
|
|
|
if (this.spinner) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.spinner = document.createElement('div');
|
|
|
|
this.spinner.className = 'spinner';
|
|
|
|
sibling.parentNode.appendChild(this.spinner);
|
2016-09-04 12:52:59 +02:00
|
|
|
|
|
|
|
if (label) {
|
|
|
|
this.spinner_label = document.createElement('span');
|
|
|
|
this.spinner_label.className = 'spinner_label';
|
|
|
|
this.spinner_label.innerHTML = label;
|
|
|
|
sibling.parentNode.appendChild(this.spinner_label);
|
|
|
|
}
|
2016-09-04 12:45:15 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
UploadQueue.prototype.hideSpinner = function() {
|
2016-09-04 12:52:59 +02:00
|
|
|
if (this.spinner) {
|
|
|
|
this.spinner.parentNode.removeChild(this.spinner);
|
|
|
|
this.spinner = null;
|
|
|
|
}
|
|
|
|
if (this.spinner_label) {
|
|
|
|
this.spinner_label.parentNode.removeChild(this.spinner_label);
|
|
|
|
this.spinner_label = null;
|
|
|
|
}
|
2016-09-04 12:45:15 +02:00
|
|
|
};
|