JSFiddle - React, Tailwind, and code Playground

by someprimetime

HTML

<button id="js-btn" class="btn_bg"></button>
<input id="js-file-upload" type="file" value="" />

CSS

.btn_bg {
    background: url(http://media.smashingmagazine.com/images/wallpapers4/lolli.jpg) no-repeat;
    width: 500px;
    height: 500px;
    border: none;
}

#js-file-upload {
    display: none;
    visibility: hidden;
}

JavaScript

$(function() {
    $('#js-btn').click(function(e) {
        e.preventDefault();
        $('#js-file-upload').click();

        $('input[type=file]').change(function() {
            var ext = $('#js-file-upload').val().split('.').pop().toLowerCase();

            if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
                alert('invalid extension!');
                return false;
            }
            var newBg = 'http://files.vladstudio.com/joy/gift_delivery/wall/vladstudio_gift_delivery_480x320.jpg';
            $('#js-btn').css({
                'background': 'url(' + newBg + ')',
                'background-position': '0 -10px'
            });
        });

    });
});