FILES UPLOADS - DRAG AND DROP FILES AND DISPLAY SELECTED FILES WITH VANILLA JS
Drag and drop feature will be good for UX. Learn how to do it with out any external javascript library in this tutorial.
DEMO , Drop files into below form input to see What I'm talking about.
Cool Right!? ..Let's begin our tutorial
This is our html for the form , add more file inputs with help of below HTML
<section class="responsive600">
<h1>PURE JS DRAG AND DROP DEMO</h1>
<form method="POST" action="" id="a1">
<div class="form-field">
<label data-form-field="attachments[]" data-form-id="a1" for="a7">
<p data-form-field="attachments[]" data-form-id="a1">UPLOAD ATTACHMENTS</p>
<div class="drag-drop" data-form-field="attachments[]" data-form-id="a1">
<p data-form-field="attachments[]" data-form-id="a1">Select file(s) or </p>
<p data-form-field="attachments[]" data-form-id="a1"> Drag and Drop your file(s) here</p>
<input class="file-input" data-form-field="attachments[]" data-form-id="a1" name="attachments[]" type="file" multiple="multiple" id="a7" >
</div>
</label>
<div data-form-field="attachments[]" class="file-list">
</div>
</div>
</form>
</section>
CSS
body {
margin: 0 auto;
}
.responsive600 {
margin: 0 auto 0 auto;
width: 600px;
}
form {
margin: 0 auto 0 auto;
width: 98%;
}
div.form-field {
margin: 0 auto 0 auto;
width: 98%;
text-align: center;
padding: 0.5em 0 0.5em;
}
div.form-field label {
display: block;
margin: 0 auto 0 auto;
padding: 0.5em 0 1em;
width: 100%;
font-size: 1.2em;
cursor: pointer;
}
div.form-field label div.drag-drop {
margin: 0em auto 0em auto;
width: 90%;
padding: 0.5em 0 0.5em 0;
box-shadow: inset 0 0 2px #000000ad;
color: #000000ad;
font-weight: lighter;
}
div.form-field label div.drag-drop input {
width: 0;
height: 0;
outline: none;
opacity: 0;
}
div.file-list {
margin: 0.2em auto 0.2em auto;
width: 80%;
grid-template-columns: 1fr;
font-size: 0.8em;
}
div.file-list div.file {
width: 100%;
margin: 1em auto 1em auto;
display: grid;
grid-template-columns: 100%;
text-transform: uppercase;
box-shadow: -3px 1px 6px grey;
letter-spacing: 0.1em;
}
div.file-list div.file div.file-name,
div.file-list div.file div.file-details div.file-extension,
div.file-list div.file div.file-details div.file-size {
display: grid;
align-items: center;
justify-content: center;
overflow: hidden;
overflow-x: auto;
padding: 1.2em 0 1.2em;
}
div.file-list div.file div.file-name {
background: rgba(0, 0, 0, 0.664);
color: wheat;
}
div.file-list div.file div.file-details div.file-extension {
color: white;
background-color: rgba(128, 0, 128, 0.513);
}
div.file-list div.file div.file-details div.file-size {
color: white;
background-color: rgba(0, 0, 139, 0.561);
}
div.file-list div.file div.file-details {
display: grid;
grid-template-columns: 50% 50%;
}
@media (max-width:1020px) {
.responsive600 {
width: 90%;
}
}JavaScript
class DragAndDrop {
constructor() {
this.filesDropped();
this.filesChanged();
}
filesDropped() {
let ele = document.querySelectorAll("div.drag-drop");
for (let i = 0; i < ele.length; i++) {
ele[i].ondragover = ele[i].ondragenter = function(e) {
e.preventDefault();
};
ele[i].ondrop = (e) => {
e.preventDefault();
let formId = e.target.getAttribute("data-form-id");
let formField = e.target.getAttribute("data-form-field");
let input = document.querySelector(`form#${formId} input[name='${formField}']`);
input.files = e.dataTransfer.files;
this.displayFilelist(formId, formField);
}
}
}
filesChanged() {
let ele = document.querySelectorAll("input.file-input");
for (let j = 0; j < ele.length; j++) {
ele[j].onchange = (e) => {
let formId = e.target.getAttribute("data-form-id");
let formField = e.target.getAttribute("data-form-field");
this.displayFilelist(formId, formField);
}
}
}
displayFilelist(formId, formField) {
let files = document.querySelector(`form#${formId} input[name='${formField}']`).files;
var fileList = ``;
for (var i = 0; i < files.length; i++) {
let fileExt = this.getFileExtension(files[i].name);
let fileSize = this.convertBytesTo(files[i].size, 'K', 0);
fileList = `
${fileList}
<div class="file">
<div class="file-name">
${files[i].name}
</div>
<div class="file-details">
<div class="file-extension">
${fileExt}
</div>
<div class="file-size">
${fileSize} KB
</div>
</div>
</div>
`;
}
document.querySelector(`form#${formId} div.file-list[data-form-field='${formField}']`).innerHTML = fileList;
}
convertBytesTo(bytes, to, decimalPlaces = 2) {
switch (to) {
case 'K':
{
bytes = bytes / 1024;
break;
}
case 'M':
{
bytes = bytes / 1048576;
break;
}
case 'G':
{
bytes = bytes / 1073741824;
break;
}
}
return bytes = +bytes.toFixed(decimalPlaces);
}
getFileExtension(fileName) {
return fileName.split('.').pop();
}
}
var dd = new DragAndDrop();