JSFiddle - React, Tailwind, and code Playground

by Igaojsfiddle

HTML

<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script>
    <div class="row">
        <div class="span5">
            <h2>Select an image file</h2>
            <p><input type="file" id="file-input"></p>
            <p><span class="label label-info">Notice</span> Or <strong>drag &amp; drop</strong> an image file onto this webpage.</p>
        </div>
        <div class="span7">
            <h2>Result</h2>
            <div class="well" id="result"><p><span class="label label-warning">Notice</span> This demo works only in browsers with support for the <a href="https://developer.mozilla.org/en/DOM/window.URL">URL</a> or <a href="https://developer.mozilla.org/en/DOM/FileReader">FileReader</a> API.</p></div>
        </div>
    </div>
</div>

JavaScript

(function ($) {
    'use strict';
    var result = $('#result'),
        load = function (e) {
            e = e.originalEvent;
            e.preventDefault();
            if (!window.loadImage(
                    (e.dataTransfer || e.target).files[0],
                    function (img) {
                        if (!(img.src || img instanceof HTMLCanvasElement)) {
                            img = $(
                                '<span class="label label-important">Error</span>' +
                                    ' <span>Loading image file failed</span>'
                            );
                        }
                        result.children().replaceWith(img);
                    },
                    {
                        maxWidth: result.children().outerWidth(),
                        canvas: true
                    }
                )) {
                result.children().replaceWith(
                    $(
                        '<span class="label label-important">Error</span>' +
                            ' <span>Your browser does not support the URL or FileReader API.</span>'
                    )
                );
            }
        };
    $(document)
        .on('dragover', function (e) {
            e = e.originalEvent;
            e.preventDefault();
            e.dataTransfer.dropEffect = 'copy';
        })
        .on('drop', load);
    $('#file-input').on('change', load);
}(jQuery));