228 lines
No EOL
8.9 KiB
JavaScript
228 lines
No EOL
8.9 KiB
JavaScript
(function (window) {
|
|
"use strict";
|
|
|
|
window.ls.container.get('view').add(
|
|
{
|
|
selector: 'data-forms-upload',
|
|
repeat: false,
|
|
controller: function(element, window, container, alerts, expression) {
|
|
var scope = element.dataset['scope'];
|
|
var labelButton = element.dataset['labelButton'] || 'Upload';
|
|
var labelLoading = element.dataset['labelLoading'] || 'Uploading...';
|
|
var previewWidth = element.dataset['previewWidth'] || null;
|
|
var previewHeight = element.dataset['previewHeight'] || 200;
|
|
var accept = element.dataset['accept'] || '';
|
|
var required = (element.dataset['required'] || false);
|
|
var multiple = (element.dataset['multiple'] || false);
|
|
var className = (element.dataset['class'] || 'upload');
|
|
var max = parseInt((element.dataset['max'] || 4));
|
|
var sdk = (scope === 'sdk') ? container.get('sdk') : container.get('console');
|
|
var output = (element.value) ? ((multiple) ? JSON.parse(element.value) : [element.value]) : [];
|
|
var total = 0;
|
|
|
|
var wrapper = document.createElement('div');
|
|
var input = document.createElement('input');
|
|
var upload = document.createElement('div'); // Fake button
|
|
var preview = document.createElement('ul');
|
|
var progress = document.createElement('div');
|
|
var count = document.createElement('div');
|
|
|
|
wrapper.className = className;
|
|
|
|
input.type = 'file';
|
|
input.accept = accept;
|
|
input.required = required;
|
|
input.multiple = multiple;
|
|
input.tabIndex = -1;
|
|
|
|
count.className = 'count';
|
|
|
|
upload.className = 'button reverse margin-bottom';
|
|
upload.innerHTML = '<i class="icon icon-upload"></i> ' + labelButton;
|
|
upload.tabIndex = 0;
|
|
|
|
preview.className = 'preview';
|
|
|
|
progress.className = 'progress';
|
|
progress.style.width = '0%';
|
|
progress.style.display = 'none';
|
|
|
|
var humanFileSize = function (bytes, si) {
|
|
var thresh = si ? 1000 : 1024;
|
|
|
|
if(Math.abs(bytes) < thresh) {
|
|
return bytes + ' B';
|
|
}
|
|
|
|
var units = si
|
|
? ['KB','MB','GB','TB','PB','EB','ZB','YB']
|
|
: ['KiB','MiB','GiB','TiB','PiB','EiB','ZiB','YiB'];
|
|
|
|
var u = -1;
|
|
|
|
do {
|
|
bytes /= thresh;
|
|
++u;
|
|
} while(Math.abs(bytes) >= thresh && u < units.length - 1);
|
|
|
|
return bytes.toFixed(1)+' '+units[u];
|
|
};
|
|
|
|
var onComplete = function (message) {
|
|
alerts.remove(message);
|
|
|
|
input.disabled = false;
|
|
upload.classList.remove('disabled');
|
|
progress.style.width = '0%';
|
|
progress.style.display = 'none';
|
|
};
|
|
|
|
var onProgress = function (event) {
|
|
var percentage = (event.lengthComputable) ? Math.round(event.loaded * 100 / event.total) : '0';
|
|
progress.style.display = (percentage !== 0) ? 'block' : 'none';
|
|
progress.style.width = percentage + '%';
|
|
};
|
|
|
|
var render = function (files) { // Generate image previews + remove buttons + input array (array only when multiple is on)
|
|
|
|
if(!Array.isArray(files)) { // Support single file
|
|
files = [files];
|
|
}
|
|
|
|
preview.innerHTML = '';
|
|
|
|
count.innerHTML = '0 / ' + max;
|
|
|
|
files.map(function(obj) {
|
|
var file = document.createElement('li');
|
|
var image = document.createElement('img');
|
|
|
|
image.src = image.src = sdk.storage.getPreview(obj, null, previewWidth, previewHeight);
|
|
|
|
file.className = 'file';
|
|
file.tabIndex = 0;
|
|
file.appendChild(image);
|
|
|
|
count.innerHTML = files.length + ' / ' + max;
|
|
|
|
preview.appendChild(file);
|
|
|
|
if((files.length >= max)) {
|
|
input.disabled = true;
|
|
upload.classList.add('disabled');
|
|
}
|
|
else {
|
|
input.disabled = false;
|
|
upload.classList.remove('disabled');
|
|
}
|
|
|
|
var remove = (function (obj) {
|
|
return function (event) {
|
|
output = (Array.isArray(output)) ? output.filter(function(e) {return e !== obj}) : [];
|
|
|
|
render(output);
|
|
}
|
|
})(obj);
|
|
|
|
file.addEventListener('click', remove);
|
|
file.addEventListener('keypress', remove);
|
|
|
|
element.value = (multiple) ? JSON.stringify(output) : output[0];
|
|
|
|
/*title.addEventListener('click', function () {
|
|
setTab(i);
|
|
});
|
|
|
|
title.addEventListener('keyup', function () {
|
|
if(event.which === 13) {
|
|
setTab(i);
|
|
}
|
|
});*/
|
|
});
|
|
};
|
|
|
|
input.addEventListener('change', function() {
|
|
var message = alerts.send({text: labelLoading, class: ''}, 0);
|
|
var files = input.files;
|
|
var formData = new FormData();
|
|
var read = JSON.parse(expression.parse(element.dataset['read'] || '[]'));
|
|
var write = JSON.parse(expression.parse(element.dataset['write'] || '[]'));
|
|
|
|
if(!multiple) {
|
|
output = [];
|
|
}
|
|
|
|
for (var i = 0; i < files.length; i++) {
|
|
if(output.length + (i + 1) > max) {
|
|
break;
|
|
}
|
|
|
|
var file = files[i];
|
|
|
|
formData.append('files[]', file);
|
|
|
|
total = total + file.size;
|
|
}
|
|
|
|
for (var x = 0; x < read.length; x++) {
|
|
formData.append('read[]', read[x]);
|
|
}
|
|
|
|
for (var y = 0; y < write.length; y++) {
|
|
formData.append('write[]', write[y]);
|
|
}
|
|
|
|
sdk.storage.create(formData, onProgress)
|
|
.then(function (response) {
|
|
// parse array of $id's and assign to input value
|
|
response = JSON.parse(response);
|
|
|
|
response.map(function(obj) {
|
|
if(!Array.isArray(output)) { // Support single file
|
|
throw new Error('Can\'t append new file to non array value');
|
|
}
|
|
|
|
output[output.length] = obj['$uid'];
|
|
});
|
|
|
|
onComplete(message);
|
|
|
|
render(output);
|
|
}, function (error) {
|
|
alerts.send({text: 'An error occurred!', class: ''}, 3000); // File(s) uploaded.
|
|
onComplete(message);
|
|
});
|
|
|
|
input.disabled = true;
|
|
});
|
|
|
|
element.addEventListener('change', function () {
|
|
if(!element.value) {
|
|
return;
|
|
}
|
|
output = (multiple) ? JSON.parse(element.value) : [element.value];
|
|
render(output);
|
|
});
|
|
|
|
upload.addEventListener('keypress', function () {
|
|
input.click();
|
|
});
|
|
|
|
element.parentNode.insertBefore(wrapper, element);
|
|
|
|
wrapper.appendChild(preview);
|
|
wrapper.appendChild(progress);
|
|
wrapper.appendChild(upload);
|
|
|
|
if(multiple) {
|
|
wrapper.appendChild(count);
|
|
}
|
|
|
|
upload.appendChild(input);
|
|
|
|
render(output);
|
|
}
|
|
}
|
|
);
|
|
|
|
})(window); |