JSFiddle - React, Tailwind, and code Playground

by Valerie Ren

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container" style="margin-top: 20px;">
    <div class="row">
        <div class="col-lg-6 col-sm-6 col-12">
            <div class="fileinputs">
                <div class="input-group">
                    <span class="input-group-btn">
	                    <span class="btn btn-primary btn-file">
	                        Browse&hellip; <input type="file" multiple>
	                    </span>
                    </span>
                    <input type="text" class="form-control" readonly>
                </div>
                <br/>
            </div>
            <a href="#" id="new-btn">Add New</a>
            <div id="new-div"></div>
        </div>
    </div>
</div>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}

.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    background: red;
    cursor: inherit;
    display: block;
}

input[readonly] {
    background-color: white !important;
    cursor: text !important;
}

JavaScript

$(document).ready(function() {
    $('#new-btn').on('click', function() {
        $('#new-div').append($('.fileinputs').html());
    });

    $(document).on('fileselect', '.btn-file :file', function(event, numFiles, label) {
        var input = $(this).closest('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;
        if (input.length) {
            input.val(log);
        } else {
            if (log) alert(log);
        }
    });
});

$(document).on('change', '.btn-file :file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
    console.log('triggered');
});