Sample for HTML5 File Drop

by Emanuele del Grande

HTML

<div class="logo">
    <span>JS</span> <span>DragFiles</span>
    <div>Read files with JavaScript</div>
</div>

<p>Drag a file into an area and read it with JavaScript</p>

<div id="dropzone" effectAllowed="move">Drop files here!</div>

<ol id="files"></ol>
<div>Try dragging an image. Multiple files work too.</div>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }

/* DROP AREA AND FILE LIST STYLES */
#dropzone {
    min-height: 50px; padding: 20px; border: dashed 1px #bbb; line-height: 50px;
    color: #bbb; background-color: #eee;
}
#dropzone.dropover { color: #9bd; border-color: #9bd; background-color: #aef; }
#files {}
#files:empty::before { content: "(Files data will be shown here)."; }
#files img {
    display: block; 
	width: auto; max-width: 128px; height: auto; max-height: 128px; margin: 10px 0;
    border: solid 1px #ccc; cursor: pointer;
}

JavaScript

var URL_BLANK_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
var elDrop = document.getElementById('dropzone');
var elFiles = document.getElementById('files');

// prevent dropping files on the page:
window.addEventListener('dragover', function(e){
  e = e || event;
  e.preventDefault();
}, false);
window.addEventListener('drop', function(e){
  e = e || event;
  e.preventDefault();
}, false);

elDrop.addEventListener('dragover', function(event) {
        event.preventDefault();
        event.dataTransfer.dropEffect = 'copy';
        showDropping();
});

elDrop.addEventListener('dragleave', function(event) {
        hideDropping();
});

elDrop.addEventListener('drop', function(event) {
        event.preventDefault();
        hideDropping();

        var files = event.dataTransfer.files;
        showFiles(files);
});

document.addEventListener('click', function(event) {
    var elTarget = event.target;
    if (elTarget.tagName === 'IMG') {
        var src = elTarget.src;
        var w = window.open('about:blank');
        var d = w.document;
        var title = escapeHtml(elTarget.getAttribute('title'));

        d.open();
        d.write('<title>' + title + '</title>');
        d.write('<img src="' + src + '" />');
        d.close();
    }
});

function showDropping() {
        elDrop.classList.add('dropover');
}

function hideDropping() {
        elDrop.classList.remove('dropover');
}

function showFiles(files) {
        elFiles.innerHTML = '';

        for (var i = 0, l = files.length; i < l; ++i) {
                var file = files[i];
                var elFile = buildElFile(file);
                elFiles.appendChild(elFile);
        }
}

function buildElFile(file) {
        var elFile = document.createElement('li');
        var text = file.name + ' (' + file.type + ', ' + file.size + ' bytes)';
        elFile.appendChild(document.createTextNode(text));

        if (file.type.indexOf('image/') === 0) {
            var...