File Selection, Drag & Drop, ...

HTML5 File API

by Yannick Portier

HTML

<p>
     <h2>Simplest :</h2>

    <div class="example">
        <input type="file" id="files1" name="files1[]" multiple />
        <output id="file_list1"></output>
    </div>
</p>
<p>
     <h2>Drop Zone :</h2>

    <div class="example">
        <div id="drop_zone">Drop files here</div>
        <output id="file_list2"></output>
    </div>
</p>
<p>
     <h2>Progress Bar :</h2>

    <div class="example">
        <input type="file" id="files3" name="files3[]" multiple />
        <button onclick="abortRead();">Cancel</button>
        <div id="progress_bar">
            <div class="percent">0%</div>
        </div>
        <output id="file_list3"></output>
    </div>
</p>

CSS

.example {
    padding: 10px;
    border: 1px solid #ccc;
}
#drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;
}
.thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}
#progress_bar {
    margin: 10px 0;
    padding: 3px;
    border: 1px solid #000;
    font-size: 14px;
    clear: both;
    opacity: 0;
    -o-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
}
#progress_bar.loading {
    opacity: 1.0;
}
#progress_bar .percent {
    background-color: #99ccff;
    height: auto;
    width: 0;
}
#byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
#byte_range {
    margin-top: 5px;
}

JavaScript

// SIMPLEST
function handleFileSelect1(evt) {
    var files = evt.target.files; // FileList object
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes, last modified: ',
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</li>');
    }
    document.getElementById('file_list1').innerHTML = '<ul>' + output.join('') + '</ul>';
}
document.getElementById('files1').addEventListener('change', handleFileSelect1, false);





// DROP ZONE
function handleFileSelect2(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files; // FileList object.
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
        f.size, ' bytes, last modified: ',
        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
            '</li>');
    }
    document.getElementById('file_list2').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// Setup the Drag n' Drop listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect2, false);





// PROGRESS BAR
var reader;
var progress = document.querySelector('.percent');

function updateProgress(evt) {
    // evt is a ProgressEvent.
    if (evt.lengthComputable) {
        var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
        // Increase the progress bar length.
        if (percentLoaded < 100) {
        ...