JSFiddle - React, Tailwind, and code Playground

by Michael DeBerry

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div style="padding: 20px">
    <input id="fileUpload" type="file" />
</div>
<div style="padding: 20px">
    <input id="fileUpload1" type="file" />
</div>
<div style="padding: 20px">
    <input id="fileUpload2" class="form-control input-sm" type="file" />
</div>
<div id="shouldDoNothing">Should not doing anything, not a input[type=file]</div>

JavaScript

;
(function ($) {
    var pluginName = 'bootstrapFileInput';
    var defaults = {
        size: 'md',
        btnPosition: 'right',
        btnType: 'btn-default',
        btnText: 'Browse...'
    };

    function BootstrapFileInput(element, options) {
        this._element = element;
        this._options = $.extend({}, defaults, options);
        this._name = pluginName;

        this.init();
    }

    BootstrapFileInput.prototype.init = function () {
        var fileUpload = $(this._element);
        var inputGroup = $('<div class="input-group" />');
        var buttonGroup = $('<span class="input-group-btn" />');
        var input = $('<input type="text" readonly class="form-control" />');
        var button = $('<button type="button" class="btn" />')
            .text(this._options.btnText)
            .addClass(this._options.btnType);

        if (this._options.size === 'sm') {
           inputGroup.addClass('input-group-sm');
        } else if (this._options.size === 'lg') {
            inputGroup.addClass('input-group-lg');
        }

        fileUpload.hide();
        buttonGroup.append(button);

        if (this._options.btnPosition === 'left') {
            inputGroup.append(buttonGroup);
            inputGroup.append(input);
        } else {
            inputGroup.append(input);
            inputGroup.append(buttonGroup);
        }

        inputGroup.insertAfter(fileUpload);

        button.on('click', function () {
            fileUpload.click();
        });

        fileUpload.on('change', function () {
            input.val(fileUpload.val().split('/').pop().split('\\').pop());
        });
    };

    $.fn.bootstrapFileInput = function (options) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName) && this.tagName === 'INPUT' && this.type === 'file') {
                $.data(this, 'plugin_' + pluginName);
                new BootstrapFileInput(this, options);
            }
        });
   ...