JSFiddle - React, Tailwind, and code Playground

by raam86

JavaScript

var readStart = function(progressEvent) {
    console.log('readStart',progressEvent);
}

var readEnd = function(progressEvent) {
    console.log('readEnd',progressEvent,this);
    var fileReader = this;
    var fileContent = fileReader.result;
    var fileName = fileReader.file.name;
    // Note you can not retreive file path, for security reasons. 
    // But you are not supposed to need it, you already have the content ;)
    console.log('readEnd:',fileName,fileContent);
}

var readProgress = function(progressEvent) {
    console.log('readProgress',progressEvent);
    if (progressEvent.lengthComputable) {
        var percentage = Math.round((event.loaded * 100) / event.total);
        console.log('readProgress: Loaded : '+percentage+'%');
    }
}

var readError = function(progressEvent) {
    console.log('readError',progressEvent);
    switch(progressEvent.target.error.code) {
        case progressEvent.target.error.NOT_FOUND_ERR:
            alert('File not found!');
            break;
        case progressEvent.target.error.NOT_READABLE_ERR:
            alert('File not readable!');
            break;
        case progressEvent.target.error.ABORT_ERR:
            break; 
        default: 
            alert('Unknow Read error.');
    }
}

var readFile = function(file) {
    var reader = new FileReader();
    reader.file = file; // We need it later (filename)
    reader.addEventListener('loadstart', readStart, false);
    reader.addEventListener('loadend', readEnd, false);
    reader.addEventListener('error', readError, false);
    reader.addEventListener('progress', readProgress, false);
    reader.readAsBinaryString(file);
}

var drop = function(event) {
    event.preventDefault();
    var dt = event.dataTransfer;
    var files = dt.files;
    for (var i = 0; i<files.length; i++) {
        var file = files[i];
        readFile(file);
    }
}

window.addEventListener("drop", drop);