#overlay Drop CSV file here
#form
p Please drag'n'drop a CSV file on the this window
View Compiled
#overlay {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 32;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
filter: opacity(0);
visibility: hidden;
color: #fff;
font-size: 4.75rem;
background-color: rgba(#000,.75);
transition: .25s;
}
#form {
#error {
color: tomato;
}
}
View Compiled
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function enabled (e) {
this.target.style.filter = 'opacity(1)';
this.target.style.visibility = 'visible';
}
function disabled (e) {
this.target.style.filter = 'opacity(0)';
this.target.style.visibility = 'hidden';
}
function setErrorMessage (message) {
let messages = document.createElement('p');
messages.id = 'error';
messages.textContent = message;
const form = document.querySelector('#form');
if (form.lastChild) {
form.lastChild.remove();
}
form.appendChild(messages);
}
function getExtension(filename) {
var parts = filename.split('.');
return parts[parts.length - 1];
}
function handleDrop (e) {
// If a file type is csv
const ext = getExtension(e.dataTransfer.files[0].name);
if (ext.toLowerCase() != 'csv') {
e.preventDefault();
e.stopPropagation();
document.querySelector('#overlay').style.filter = 'opacity(0)';
document.querySelector('#overlay').style.visibility = 'hidden';
setErrorMessage('Invalid file type');
return false;
}
overlay.textContent = 'Now uploading the file...';
let formData = new FormData();
formData.append('file', e.dataTransfer.files[0]);
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
switch (xhr.status) {
case 200:
location.reload();
break;
case 500:
document.querySelector('#overlay').style.filter = 'opacity(0)';
document.querySelector('#overlay').style.visibility = 'hidden';
const errorMessage = JSON.parse(xhr.responseText)['alert'];
setErrorMessage(errorMessage);
break;
default:
break;
}
}
}
xhr.open('POST', '/upload');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
// Uncomment a bellow line when included this code to your app
// xhr.send(formData);
// Remove bellow 3 lines when included this code to your app
alert('Complete uploading');
document.querySelector('#overlay').style.filter = 'opacity(0)';
document.querySelector('#overlay').style.visibility = 'hidden';
}
/**
* @function acceptDragDrop
* @description Accept a file to upload on window with drag'n'drop
*/
const acceptDragDrop = () => {
const overlay = document.querySelector('#overlay');
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
overlay.addEventListener(eventName, preventDefaults, false);
});
window.addEventListener('dragenter', { handleEvent: enabled, target: overlay });
overlay.addEventListener('dragleave', { handleEvent: disabled, target: overlay });
overlay.addEventListener('drop', { handleEvent: handleDrop, target: overlay });
}
document.addEventListener('DOMContentLoaded', e => {
acceptDragDrop();
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.