pics/public/js/upload_queue.js

212 lines
5.5 KiB
JavaScript
Raw Normal View History

class UploadQueue {
constructor(options) {
this.queue = options.queue_element;
this.preview_area = options.preview_area;
this.upload_progress = [];
this.upload_url = options.upload_url;
this.submit = options.submit_button;
this.addEvents();
}
2016-09-04 11:54:17 +02:00
addEvents() {
this.queue.addEventListener('change', event => {
this.showSpinner(this.queue, "Generating previews (not uploading yet!)");
this.clearPreviews();
for (let i = 0; i < this.queue.files.length; i++) {
const callback = (i !== this.queue.files.length - 1) ? null : () => {
this.hideSpinner();
this.submit.disabled = false;
};
if (this.queue.files[0].name.includes(".HEIC")) {
alert('Sorry, the HEIC image format is not supported.\nPlease convert your photos to JPEG before uploading.');
this.hideSpinner();
this.submit.disabled = false;
break;
}
this.addPreviewBoxForQueueSlot(i);
this.addPreviewForFile(this.queue.files[i], i, callback);
};
});
this.submit.addEventListener('click', event => {
event.preventDefault();
this.process();
});
this.submit.disabled = true;
}
clearPreviews() {
this.preview_area.innerHTML = '';
this.submit.disabled = true;
this.current_upload_index = -1;
}
addPreviewBoxForQueueSlot(index) {
const preview_box = document.createElement('div');
preview_box.id = 'upload_preview_' + index;
this.preview_area.appendChild(preview_box);
2016-09-04 11:54:17 +02:00
}
addPreviewForFile(file, index, callback) {
if (!file) {
return false;
}
2016-09-04 11:54:17 +02:00
const preview = document.createElement('canvas');
preview.title = file.name;
2016-09-04 13:14:06 +02:00
const preview_box = document.getElementById('upload_preview_' + index);
preview_box.appendChild(preview);
const reader = new FileReader();
reader.addEventListener('load', event => {
const original = document.createElement('img');
original.src = reader.result;
original.addEventListener('load', function() {
// Preparation: make canvas size proportional to the original image.
preview.height = 150;
preview.width = preview.height * (original.width / original.height);
// First pass: resize to 50% on temp canvas.
const temp = document.createElement('canvas'),
tempCtx = temp.getContext('2d');
temp.width = original.width * 0.5;
temp.height = original.height * 0.5;
tempCtx.drawImage(original, 0, 0, temp.width, temp.height);
// Second pass: resize again on temp canvas.
tempCtx.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5);
// Final pass: resize to desired size on preview canvas.
const context = preview.getContext('2d');
context.drawImage(temp, 0, 0, temp.width * 0.5, temp.height * 0.5,
0, 0, preview.width, preview.height);
if (callback) {
callback();
}
});
}, false);
reader.readAsDataURL(file);
}
process() {
this.showSpinner(this.submit, "Preparing to upload files...");
if (this.queue.files.length > 0) {
this.submit.disabled = true;
this.nextFile();
}
}
nextFile() {
const files = this.queue.files;
const 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, this.nextFile);
}
}
sendFile(file, index, callback) {
const request = new XMLHttpRequest();
request.addEventListener('error', event => {
this.updateProgress(index, -1);
});
request.addEventListener('progress', event => {
this.updateProgress(index, event.loaded / event.total);
});
request.addEventListener('load', event => {
this.updateProgress(index, 1);
if (request.responseText !== null && request.status === 200) {
const obj = JSON.parse(request.responseText);
if (obj.error) {
alert(obj.error);
return;
}
else if (callback) {
callback.call(this, obj);
}
}
});
const data = new FormData();
data.append('uploads', file, file.name);
request.open('POST', this.upload_url, true);
request.send(data);
2016-09-04 13:14:06 +02:00
}
addProgressBar(index) {
if (index in this.upload_progress) {
return;
}
2016-09-04 13:14:06 +02:00
const progress_container = document.createElement('div');
progress_container.className = 'progress';
2016-09-04 13:14:06 +02:00
const progress = document.createElement('div');
progress_container.appendChild(progress);
2016-09-04 13:14:06 +02:00
const preview_box = document.getElementById('upload_preview_' + index);
preview_box.appendChild(progress_container);
2016-09-04 13:14:06 +02:00
this.upload_progress[index] = progress;
2016-09-04 13:14:06 +02:00
}
updateProgress(index, progress) {
if (!(index in this.upload_progress)) {
this.addProgressBar(index);
}
const bar = this.upload_progress[index];
if (progress >= 0) {
bar.style.width = Math.ceil(progress * 100) + '%';
} else {
bar.style.width = "";
if (progress === -1) {
bar.className = "error";
}
}
}
showSpinner(sibling, label) {
if (this.spinner) {
return;
}
this.spinner = document.createElement('div');
this.spinner.className = 'spinner';
sibling.parentNode.appendChild(this.spinner);
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);
}
}
setSpinnerLabel(label) {
if (this.spinner_label) {
this.spinner_label.innerHTML = label;
}
2016-09-04 13:14:06 +02:00
}
hideSpinner() {
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;
}
}
}