JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<div id="upload_form" style="display: inline-block; position: relative; width: 100%; margin: auto;"> <div id="upload" style="width: 98%; background:#fff; float: left;line-height: 3;box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);"><span class="name" style=" padding-left: 10%; ">Выберите картинку</span></div><div class="md-btn md-btn-primary" style=" position: absolute; right: 0; width: 30%; text-align: center; line-height: 3; height: 100%;">Обзор..</div> <input required="" style="position: absolute; top: 0px; right: 0px; width: 100%; height: 100%; opacity: 0; margin: 0px; padding:0px;cursor:pointer;" type="file" name="file" id="file"> </div>

JavaScript

var size = (1024*1024);
        $('#file').bind(
    {
        change: function()
        {
            $.each(this.files, function(i, file)
            {
                // Отсеиваем не картинки
                if (window.FileReader !== null)
                {
                    if (!file.type.match(/image.*/))
                    {
                        alert('Данный файл не является изображением. Допустимые расширения: *.gif, *.jpg, *.jpeg, *.bmp, *.png')
                        upload = false;
                        }
                    if (file.size > size)
                    {
                        alert('Максимальный размер изображения ' + (size/1024) +' кб')
                        upload = false;
                    }

                }
                $('.name').text(file.name);
                $("#file").prop("title", file.name);
                upload = true;
            });
        }
    });