forked from projects/fipamo
ro
a7354da38f
there was a minor bug that was preventing uploaded files to be removed from the editor page even thought the remove button was pressed. found and fixed
299 lines
8.3 KiB
JavaScript
299 lines
8.3 KiB
JavaScript
import Sortable from '../vendor/sortable.core.esm.js';
|
|
import anime from '../vendor/anime.es.js';
|
|
import DataUtils from '../utils/DataUtils.js';
|
|
import Notfications from './Notifications.js';
|
|
import Maintenance from '../../libraries/MaintenanceRequest.js';
|
|
const notify = new Notfications();
|
|
|
|
export default class FileManager {
|
|
//--------------------------
|
|
// constructor
|
|
//--------------------------
|
|
constructor(upload, input, imageList, fileList) {
|
|
this.mr = new Maintenance(null, null, document.getElementById('notify-progress'));
|
|
this.upload = upload;
|
|
this.input = input;
|
|
this.imageList = imageList;
|
|
this.fileList = fileList;
|
|
this.accetableFiles = [
|
|
'image/jpeg',
|
|
'image/gif',
|
|
'image/png',
|
|
'image/svg',
|
|
'audio/mpeg',
|
|
'video/mp4',
|
|
'application/pdf',
|
|
'text/plain',
|
|
'text/rtf'
|
|
];
|
|
this.files = [];
|
|
this.sortedFiles = [];
|
|
this.storage = [];
|
|
this.mediaSort = Sortable.create(this.imageList, {
|
|
animation: 150,
|
|
onUpdate: () => {
|
|
//notify.alert('REINDEXING MEDIA', null);
|
|
//this.updateFiles();
|
|
}
|
|
});
|
|
this.fileSort = Sortable.create(this.fileList, {
|
|
animation: 150,
|
|
onUpdate: () => {
|
|
//notify.alert('REINDEXING FILES', null);
|
|
//this.updateFiles();
|
|
}
|
|
});
|
|
this.start();
|
|
}
|
|
//--------------------------
|
|
// methods
|
|
//--------------------------
|
|
start() {
|
|
this.upload.addEventListener('dragover', e => this.handleFileActions(e), false);
|
|
this.upload.addEventListener('drop', e => this.handleFileActions(e), false);
|
|
this.input.addEventListener('change', e => this.handleFileActions(e), false);
|
|
var removeMedia = document.querySelectorAll('.media-remove');
|
|
for (var i = 0, length = removeMedia.length; i < length; i++) {
|
|
removeMedia[i].addEventListener(
|
|
'click',
|
|
e => this.removeFile(e, 'media'),
|
|
false
|
|
);
|
|
}
|
|
}
|
|
getFileOrder() {
|
|
let imgList = '';
|
|
let fileList = '';
|
|
let mediaArray = this.mediaSort.toArray();
|
|
let fileArray = this.fileSort.toArray();
|
|
for (var i = 0, length = mediaArray.length; i < length; i++) {
|
|
imgList = imgList + mediaArray[i] + ',';
|
|
}
|
|
for (var i = 0, length = fileArray.length; i < length; i++) {
|
|
fileList = fileList + fileArray[i] + ',';
|
|
}
|
|
let media = { images: imgList, files: fileList };
|
|
return media;
|
|
}
|
|
|
|
sortFiles(files) {
|
|
var self = this;
|
|
for (var i = 0, file; (file = files[i]); i++) {
|
|
var reader = new FileReader();
|
|
// Closure to capture the file information
|
|
reader.onload = (theFile => {
|
|
return function (f) {
|
|
//create remove button object
|
|
var remove = document.createElement('button');
|
|
//var removeIcon = document.createElement('i');
|
|
//removeIcon.classList.add('ti', 'ti-x');
|
|
remove.innerHTML = 'X';
|
|
remove.className = 'media-remove';
|
|
//remove.appendChild(removeIcon);
|
|
//remove.setAttribute('id', mediaCount);
|
|
remove.addEventListener(
|
|
'click',
|
|
e => self.removeFile(e, 'media'),
|
|
false
|
|
);
|
|
|
|
//upload the file
|
|
let upload = new FormData();
|
|
upload.enctype = 'multipart/form-data';
|
|
upload.append('upload_files[]', theFile, theFile.name);
|
|
let item = null;
|
|
let progress = null;
|
|
|
|
// sort files
|
|
switch (theFile.type) {
|
|
case 'image/jpg':
|
|
case 'image/jpeg':
|
|
case 'image/gif':
|
|
case 'image/svg':
|
|
case 'image/png':
|
|
item = self.itemFactory('img-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mr
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-id', result.filePath);
|
|
item.style.background =
|
|
'url(' +
|
|
f.target.result +
|
|
') no-repeat center center / cover';
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
case 'video/mp4':
|
|
item = self.itemFactory('video-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mr
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-id', result.filePath);
|
|
let video = document.createElement('video');
|
|
let source = document.createElement('source');
|
|
source.src = f.target.result;
|
|
video.appendChild(source);
|
|
item.appendChild(video);
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
case 'audio/mpeg':
|
|
item = self.itemFactory('audio-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mr
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-id', result.filePath);
|
|
let audio = document.createElement('audio');
|
|
audio.setAttribute('controls', true);
|
|
let source = document.createElement('source');
|
|
source.src = f.target.result;
|
|
audio.appendChild(source);
|
|
item.appendChild(audio);
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
case 'application/pdf':
|
|
case 'text/plain':
|
|
case 'text/rtf':
|
|
item = self.itemFactory('file-item');
|
|
progress = document.getElementById(
|
|
'pgs' + item.getAttribute('id')
|
|
);
|
|
self.mr
|
|
.filesUpload(theFile.type, upload, progress)
|
|
.then(result => {
|
|
item.setAttribute('data-id', result.filePath);
|
|
let link = document.createElement('a');
|
|
link.href = result.filePath;
|
|
link.innerHTML = result.fileName;
|
|
item.appendChild(link);
|
|
anime({
|
|
targets: progress,
|
|
width: 0,
|
|
easing: 'easeInOutQuint',
|
|
duration: 1000,
|
|
complete: () => {
|
|
item.removeChild(progress);
|
|
item.appendChild(remove);
|
|
}
|
|
});
|
|
});
|
|
break;
|
|
}
|
|
};
|
|
})(file);
|
|
// Read in the image file as a data URL.
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
itemFactory(type = null) {
|
|
//get counts for lists
|
|
var mediaCount = this.imageList.childNodes.length;
|
|
var fileCount = this.fileList.childNodes.length;
|
|
if (mediaCount < 0) mediaCount = 0;
|
|
if (fileCount < 0) fileCount = 0;
|
|
var item = document.createElement('div');
|
|
item.className = type;
|
|
var progress = document.createElement('div');
|
|
progress.className = 'item-progress';
|
|
item.appendChild(progress);
|
|
|
|
if (type == 'img-item' || type == 'video-item') {
|
|
this.imageList.appendChild(item);
|
|
progress.setAttribute('id', 'pgs' + mediaCount);
|
|
item.setAttribute('id', mediaCount);
|
|
} else {
|
|
this.fileList.appendChild(item);
|
|
progress.setAttribute('id', 'pgs' + fileCount);
|
|
item.setAttribute('id', fileCount);
|
|
}
|
|
return item;
|
|
}
|
|
|
|
//--------------------------
|
|
// event handlers
|
|
//--------------------------
|
|
removeFile(e) {
|
|
var item = e.target.parentNode;
|
|
console.log('ITEM', item);
|
|
switch (item.className) {
|
|
case 'img-item':
|
|
case 'video-item':
|
|
this.imageList.removeChild(item);
|
|
break;
|
|
case 'audio-item':
|
|
case 'file-item':
|
|
this.fileList.removeChild(item);
|
|
break;
|
|
}
|
|
notify.alert('File Removed!', true);
|
|
}
|
|
|
|
handleFileActions(e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
let self = this;
|
|
let rawList = [];
|
|
let sortedList = [];
|
|
let notOnTheList = [];
|
|
|
|
switch (e.type) {
|
|
case 'dragover':
|
|
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
|
|
break;
|
|
case 'change':
|
|
case 'drop':
|
|
e.type == 'drop'
|
|
? (rawList = e.dataTransfer.files)
|
|
: (rawList = e.target.files);
|
|
for (var i = 0, f; (f = rawList[i]); i++) {
|
|
// check witch files are cool to upload
|
|
if (this.accetableFiles.includes(f.type)) {
|
|
sortedList.push(f);
|
|
} else {
|
|
notOnTheList.push(f);
|
|
}
|
|
}
|
|
//send for sorting
|
|
self.sortFiles(sortedList);
|
|
break;
|
|
}
|
|
}
|
|
}
|