+
diff --git a/app/widgets/Upload/locales.ini b/app/widgets/Upload/locales.ini
index 92c1528f5..dcde064d3 100644
--- a/app/widgets/Upload/locales.ini
+++ b/app/widgets/Upload/locales.ini
@@ -5,4 +5,5 @@ info = Large pictures will be resized and compressed
error_filesize = File too large
error_failed = Upload failed
error_not_allowed = You are not allowed to upload a file
-error_resource_constraint = You exceeded the quota
\ No newline at end of file
+error_resource_constraint = You exceeded the quota
+drag_drop = Drag and drop your file in this area
\ No newline at end of file
diff --git a/app/widgets/Upload/upload.css b/app/widgets/Upload/upload.css
index b805d01ff..2b3e385e8 100644
--- a/app/widgets/Upload/upload.css
+++ b/app/widgets/Upload/upload.css
@@ -1,14 +1,41 @@
#upload img.preview_picture {
max-height: 35rem;
- max-width: calc(100% - 4rem);
+ max-width: calc(100% - 2rem);
margin: 0 auto;
display: block;
}
#upload img.preview_picture[src] {
- padding-bottom: 2rem;
+ margin: 1rem auto;
+ background-color: #eee;
+ background-image: linear-gradient(45deg, #CCC 25%, transparent 25%, transparent 75%, #CCC 75%, #CCC),
+ linear-gradient(45deg, #CCC 25%, transparent 25%, transparent 75%, #CCC 75%, #CCC);
+ background-size: 30px 30px;
+ background-position: 0 0, 15px 15px;
+ margin-top: 0;
}
-#upload img.preview_picture[src] + li {
+#upload img.preview_picture[src] ~ li:not(.file) {
display: none;
+}
+
+#upload div.drop {
+ width: auto;
+ margin: 2rem;
+ display: block;
+ box-sizing: border-box;
+ border-radius: 0.5rem;
+ min-height: 30rem;
+ background-color: rgba(0, 0, 0, 0.3);
+ border: 0.5rem solid transparent;
+ border-style: dashed;
+ padding: 1rem;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+#upload div.drop.dropped {
+ border-color: gray;
}
\ No newline at end of file
diff --git a/app/widgets/Upload/upload.js b/app/widgets/Upload/upload.js
index 1525c4aaa..b36098003 100644
--- a/app/widgets/Upload/upload.js
+++ b/app/widgets/Upload/upload.js
@@ -58,10 +58,10 @@ var Upload = {
}
},
- preview : function() {
- var file = document.getElementById('file').files[0];
- Upload.name = file.name;
- Upload.check(file);
+ preview : function(file) {
+ var resolvedFile = file ?? document.getElementById('file').files[0];
+ Upload.name = resolvedFile.name;
+ Upload.check(resolvedFile);
},
check : function(file) {
@@ -152,6 +152,12 @@ var Upload = {
// If the preview system is there
if (preview) {
+ console.log(file);
+ var fileInfo = document.querySelector('#upload li.file');
+ fileInfo.querySelector('p.name').innerText = Upload.name;
+ var type = file.type ? file.type + ' ยท ' : '';
+ fileInfo.querySelector('p.desc').innerText = type + MovimUtils.humanFileSize(file.size);
+
if (Upload.file.type.match(/image.*/)) {
preview.src = URL.createObjectURL(Upload.file);
} else {
@@ -196,5 +202,40 @@ var Upload = {
abort : function() {
if (Upload.xhr) Upload.xhr.abort();
+ },
+
+ attachEvents : function () {
+ document.querySelector('#upload div.drop').addEventListener('drop', ev => {
+ ev.preventDefault();
+
+ if (ev.dataTransfer.items) {
+ for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+ if (ev.dataTransfer.items[i].kind === 'file') {
+ var file = ev.dataTransfer.items[i].getAsFile();
+ Upload.preview(file);
+ }
+ }
+ }
+ });
+
+ var dropArea = document.querySelector('#upload div.drop');
+
+ dropArea.querySelector('img.preview_picture')
+ .addEventListener('drop', ev => ev.preventDefault());
+
+ dropArea.addEventListener('dragover', ev => {
+ ev.preventDefault();
+ dropArea.classList.add('dropped');
+ }, false);
+
+ dropArea.addEventListener('drop', ev => {
+ ev.preventDefault();
+ dropArea.classList.remove('dropped');
+ }, false);
+
+ dropArea.addEventListener('dragleave', ev => {
+ ev.preventDefault();
+ dropArea.classList.remove('dropped');
+ }, false);
}
}
diff --git a/public/scripts/movim_utils.js b/public/scripts/movim_utils.js
index fe6c6f72a..3c19af54c 100644
--- a/public/scripts/movim_utils.js
+++ b/public/scripts/movim_utils.js
@@ -144,6 +144,21 @@ var MovimUtils = {
return {'page': page, 'params': str, 'hash': window.location.hash.substr(1)};
},
+ 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];
+ },
getOrientation : function(file, callback) {
var reader = new FileReader();