I am trying to do a upload file and drag & drop file but only the upload file was successfully and the drag & drop did not function and I can't figure it out. Below is my code:
HTML
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<label for="file-input">
<i onclick="" class="material-icons md-36">upload_file</i>
</label>
<input
onclick="uploadFiles()"
id="file-input"
type="file"
multiple="true"
accept=".docx,.pdf,.jpg,.jpeg,.png"
/>
CSS
.material-icons.md-36 {
font-size: 36px;
color: #65daff;
position: absolute;
top: 47.6%;
right: 16.67%;
left: 11.67%;
cursor: pointer;
user-select: none;
}
#file-input {
display: none;
visibility: none;
}
JavaScript
function uploadFiles() {
var files = document.getElementById("file-input").files;
if (files.length == 0) {
alert("Please first choose or drop any file");
return;
}
var filenames = "";
for (var i = 0; i < files.length; i++) {
filenames += files[i].name + "\n";
}
alert("Selected file: " + filenames);
}
You need to have drag and drop handler. This code is taken from the doc . I added a wrapper div to handler drag and drop. Two events to handle this is ondrop to handle file drop and ondragover just to prevent default behaviour of file dragging
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
function uploadFiles() {
var files = document.getElementById("file-input").files;
if (files.length == 0) {
alert("Please first choose or drop any file");
return;
}
var filenames = "";
for (var i = 0; i < files.length; i++) {
filenames += files[i].name + "\n";
}
alert("Selected file: " + filenames);
}
function dragOverHandler(ev) {
console.log('File(s) in drop zone');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
function dropHandler(ev) {
console.log('File(s) dropped');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
if (ev.dataTransfer.items) {
// Use DataTransferItemList interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.items.length; i++) {
// If dropped items aren't files, reject them
if (ev.dataTransfer.items[i].kind === 'file') {
var file = ev.dataTransfer.items[i].getAsFile();
alert("Selected file: " + file.name);
}
}
} else {
// Use DataTransfer interface to access the file(s)
for (var i = 0; i < ev.dataTransfer.files.length; i++) {
console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
}
}
}.material-icons.md-36 {
font-size: 36px;
color: #65daff;
top: 47.6%;
right: 16.67%;
left: 11.67%;
cursor: pointer;
user-select: none;
}
#file-input {
display: none;
visibility: none;
}
#drop_zone {
position: relative;
background: #2D2D2D;
padding: 10px;
height: 50vw;
width: 50vw;
display: flex;
justify-content: center;
align-items: center;
}<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<label for="file-input">
<i onclick="" class="material-icons md-36">upload_file</i>
</label>
<input onclick="uploadFiles()" id="file-input" type="file" multiple="true" accept=".docx,.pdf,.jpg,.jpeg,.png" />
</div>