waveringana/embedder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

drag n drop

Browse source
This commit is contained in:
Wavering Ana 2022-11-15 15:07:35 -05:00
parent e02e3d2946
commit 9358ba54cc
No known key found for this signature in database
GPG key ID: 51C992200FFA5281
4 changed files with 108 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/css/app.css
View file

@ -69,3 +69,7 @@
.dragregion {
text-align: center;
}
.image {
width: 100%;
}

89
public/js/index.js Normal file
View file

@ -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)
}

15
routes/index.js
View file

@ -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');

4
views/index.ejs
View file

@ -7,7 +7,6 @@
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/app.css">
<script src="/js/index.js"></script>
</head>
<body>
<section class="todoapp">
@ -27,7 +26,7 @@
<!---->
<div id="dropArea">
<p class="dragregion">Upload a file or drag n' drop into the dashed region</p>
<br>
<div id="gallery"></div>
<p class="dragregion"><input class="" type="file" id="fileupload" name="fileupload"><input type="submit"></p>
<p class="dragregion">Click the file to copy the url</p>
</div>
@ -57,5 +56,6 @@
<p><a href="https://l.nekomimi.pet/project">Created by Wavering Ana</a></p>
<p><a href="https://github.com/WaveringAna/Embedder">Github</a></p>
</footer>
<script src="/js/index.js"></script>
</body>
</html>