JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="images-local"><span class="caption">load from localStorage</span>
  <div id="images-local-container"></div>
</div>
<div id="drop-area">drop JPEG file from your desktop to here</div>
<div id="upload-status"></div>

CSS

#drop-area {
    color: #666;
    border: 5px dashed #666;
    padding: 12px;
    font-size: 32px;
    margin: 1em;
    text-align: center;
}
#images-server,
#images-local {
    border: 2px solid #666;
    height: 100px;
    margin: 1em;
    padding: .8em;
}
.caption {
    color: #777;
}

#upload-status {
    border: 2px solid #333;
    height: 100px;
    margin: 1em;
    padding: .8em;
}

.thumbnail {
    width: 120px;
    border: 1px solid #333;
    text-align: center;
    float: left;
    margin-left: 12px;
    font-size: 9px;
}

.thumbnail img {
    width: 80px;
}

JavaScript

$(function() {

    var maxPercentLocalUpload = 100;

    var idOf = function(prefix,file) {
        return (prefix+file.name).replace(/[. ]/g,'');
    }

    // FireReader event handlers
    var fr = (function() {
        return {
            loadStart: function(file) {
                return function(e) {
                    console.log("loadStart: "+e);

                    var uploading = $("<div></div>");
                    uploading.addClass("thumbnail");
                    uploading.append('<span>'+file.name+'</span><br /><img id="'+idOf('img',file)+'" src=""><br /><progress id="'+idOf('pg',file)+'" value="0" max="100"></progress>');
                    $('#upload-status').append(uploading);
                };
            },
            progress: function(file) {
                return function(e) {
                    console.log("progress");

                    var progressBar = $('#'+idOf('pg',file));

                    if (e.lengthComputable) {
                        var loaded = (e.loaded / e.total);
                        console.log(e.loaded + '/' + e.total + '/' + loaded);
                        if (loaded < 1) {
                            progressBar.val(loaded * maxPercentLocalUpload);
                        }
                    } else {
                        console.log("not lengthComputable");
                        progressBar.val(maxPercentLocalUpload);
                    }
                }
            },
            load: function(file) {
                return function(e) {
                    console.log("load");

                    var progressBar = $('#'+idOf('pg',file));
                    progressBar.val(maxPercentLocalUpload);

                    // show thumbnail
                    var img = $('#'+idOf('img',file));
                    img.attr('src',e.target.result);

                    // store to local storage
                    localStorage[idOf('ls',file)] = JSON.stringify({
                        file:...