diff --git a/public/css/app.css b/public/css/app.css index 7c7eaf4..864564c 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -69,3 +69,7 @@ .dragregion { text-align: center; } + +.image { + width: 100%; +} diff --git a/public/js/index.js b/public/js/index.js new file mode 100644 index 0000000..93433ed --- /dev/null +++ b/public/js/index.js @@ -0,0 +1,89 @@ +function copyURI(evt) { + evt.preventDefault(); + navigator.clipboard.writeText(absolutePath(evt.target.getAttribute('src'))).then(() => { + /* clipboard successfully set */ + console.log("copied") + }, () => { + /* clipboard write failed */ + console.log("failed") + }); +} + +function absolutePath (href) { + let link = document.createElement("a"); + link.href = href; + return link.href; +} + +let dropArea = document.getElementById("dropArea"); + +;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, preventDefaults, false) +}) + +function preventDefaults (e) { + e.preventDefault() + e.stopPropagation() +} + +;['dragenter', 'dragover'].forEach(eventName => { + dropArea.addEventListener(eventName, highlight, false) +}) + +;['dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, unhighlight, false) +}) + +function highlight(e) { + dropArea.classList.add('highlight') +} + +function unhighlight(e) { + dropArea.classList.remove('highlight') +} + +dropArea.addEventListener('drop', handleDrop, false) + +function handleDrop(e) { + let dt = e.dataTransfer + let files = dt.files + handleFiles(files) +} + +function handleFiles(files) { + files = [...files] + files.forEach(uploadFile) + files.forEach(previewFile) +} + + +function previewFile(file) { + let reader = new FileReader() + reader.readAsDataURL(file) + reader.onloadend = function() { + let img = document.createElement('img'); + img.src = reader.result + img.className = "image"; + document.getElementById('gallery').appendChild(img) + console.log(document.getElementById('fileupload')) + document.getElementById('fileupload').src = img.src; + } +} + +function uploadFile(file) { + let xhr = new XMLHttpRequest(); + let formData = new FormData(); + xhr.open('POST', '/', true); + + xhr.addEventListener('readystatechange', function(e) { + if (xhr.readyState == 4 && xhr.status == 200) { + location.reload(); + } + else if (xhr.readyState == 4 && xhr.status != 200) { + // Error. Inform the user + } + }) + + formData.append('fileupload', file); + xhr.send(formData) +} diff --git a/routes/index.js b/routes/index.js index e412de3..74978d2 100644 --- a/routes/index.js +++ b/routes/index.js @@ -18,9 +18,20 @@ const storage = multer.diskStorage({ else cb(null, prefix + '-' + req.body.title + extension(file.originalname)) } -}) +}); -let upload = multer({ storage: storage }); +const fileFilter = function(req, file, cb) { + if (file.mimetype == "image/png" || file.mimetype == "image/jpg" || file.mimetype == "image/jpeg" || file.mimetype == "image/gif" || file.mimetype == "image/webp" + || file.mimetype == "video/mp4" || file.mimetype == "video/mov" || file.mimetype == "video/webm" + || file.mimetype == "audio/mpeg" || file.mimetype == "audio/ogg") { + cb(null, true) + } else { + cb(null, false); + //return cb(new Error('Only media files allowed')); + } + } + +let upload = multer({ storage: storage, fileFilter: fileFilter }); let db = require('../db'); diff --git a/views/index.ejs b/views/index.ejs index 11d8eb4..5fc7c92 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -7,7 +7,6 @@ -
@@ -27,7 +26,7 @@

Upload a file or drag n' drop into the dashed region

-
+

Click the file to copy the url

@@ -57,5 +56,6 @@

Created by Wavering Ana

Github

+