started implementation of multiple file uploads and sorting
Ro
2 years ago
parent
8f9021bb7d
commit
3c52bca8ba
@ -0,0 +1,7 @@
|
||||
.babelrc
|
||||
README.md
|
||||
*.twig
|
||||
*.sass
|
||||
*.json
|
||||
*.php
|
||||
*.md
|
||||
@ -0,0 +1,17 @@
|
||||
{
|
||||
"arrowParens": "avoid",
|
||||
"bracketSpacing": true,
|
||||
"htmlWhitespaceSensitivity": "css",
|
||||
"insertPragma": false,
|
||||
"bracketSameLine": false,
|
||||
"jsxSingleQuote": true,
|
||||
"parser": "babel",
|
||||
"proseWrap": "preserve",
|
||||
"requirePragma": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"useTabs": true,
|
||||
"tabWidth": 4,
|
||||
"printWidth": 90
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,146 @@
|
||||
import Sortable from 'sortablejs';
|
||||
import DataUtils from '../utils/DataUtils';
|
||||
|
||||
export default class FileManager {
|
||||
//--------------------------
|
||||
// constructor
|
||||
//--------------------------
|
||||
constructor(upload, input, imageList, fileList) {
|
||||
this.upload = upload;
|
||||
this.input = input;
|
||||
this.imageList = imageList;
|
||||
this.fileList = fileList;
|
||||
this.accetableFiles = ['image/jpeg', 'image/gif', 'image/png', 'image/svg'];
|
||||
this.files = [];
|
||||
this.sortedFiles = [];
|
||||
this.storage = [];
|
||||
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);
|
||||
|
||||
Sortable.create(this.imageList, {
|
||||
onUpdate: e => {
|
||||
let currentFiles = []; //store current list
|
||||
let items = e.target.children;
|
||||
for (let index = 0; index < items.length; index++) {
|
||||
var item = items[index];
|
||||
currentFiles.push({
|
||||
id: item.getAttribute('id'),
|
||||
earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '')
|
||||
});
|
||||
}
|
||||
this.reindexFiles(currentFiles, 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getFiles() {
|
||||
return this.files;
|
||||
}
|
||||
|
||||
reindexFiles(sortOrder, step) {
|
||||
let count = sortOrder.length;
|
||||
if (step == 0) this.files = [];
|
||||
var utils = new DataUtils();
|
||||
var path = sortOrder[step].earl.split('/');
|
||||
utils.imgLoad(sortOrder[step].earl).then(blob => {
|
||||
var fresh = new File([blob], path[6], { type: blob.type });
|
||||
this.files.push(fresh);
|
||||
if (this.files.length <= count - 1) {
|
||||
this.reindexFiles(sortOrder, ++step);
|
||||
} else {
|
||||
//console.log('FILES', this.files);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
sortFiles(files) {
|
||||
var self = this;
|
||||
this.files = []; //clear files array
|
||||
this.imageList.innerHTML = '';
|
||||
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) {
|
||||
// sort files
|
||||
switch (theFile.type) {
|
||||
case 'image/jpg':
|
||||
case 'image/jpeg':
|
||||
case 'image/gif':
|
||||
case 'image/svg':
|
||||
case 'image/png':
|
||||
//create element and add to list
|
||||
var image = document.createElement('img');
|
||||
image.src = f.target.result;
|
||||
image.title = escape(theFile.name);
|
||||
var span = document.createElement('div');
|
||||
span.style.background =
|
||||
'url(' +
|
||||
f.target.result +
|
||||
') no-repeat center center / cover';
|
||||
span.className = 'img-item';
|
||||
image.setAttribute('id', i);
|
||||
self.storage.push([
|
||||
{
|
||||
id: 'page_image' + i,
|
||||
data: f.target.result,
|
||||
type: theFile.type,
|
||||
name: escape(theFile.name)
|
||||
}
|
||||
]);
|
||||
self.imageList.appendChild(span);
|
||||
//add to files list
|
||||
self.files.push(theFile);
|
||||
|
||||
break;
|
||||
}
|
||||
};
|
||||
})(file);
|
||||
// Read in the image file as a data URL.
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
|
||||
//--------------------------
|
||||
// event handlers
|
||||
//--------------------------
|
||||
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);
|
||||
//this.sortFiles(freshList);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue