JSFiddle - React, Tailwind, and code Playground

by powtac

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- TODO: * -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container"> <a class="navbar-brand" href="#"><i class="fa fa-diamond"></i> Databox</a>

        <p class="navbar-text navbar-right">Lieferant #76</p>
    </div>
</nav>
<div class="container">
     <h5 class="page-header">#76 – d°rect Versandh. GmbH & Co KG</h5>

    <ul class="list-group list-group-vendor-files">
        <li class="list-group-item">
                        <div class="dropdown pull-right">
                <button class="btn btn-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-play"></i></button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Konvertieren mit „erpdaten_79“ …</a>
                    </li>
                    <li><a href="#">Konvertieren mit „katalogdaten_79“ …</a>
                    </li>
                </ul>
            </div><span class="text-muted pull-right">04.08.2015 11:46 &nbsp;</span>xml2wwb_eas_20150703_075957.xml</li>
        <li class="list-group-item">
            <div class="dropdown pull-right">
                <button class="btn btn-info dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> <i class="fa fa-play"></i></button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">Konvertieren mit „erpdaten_79“ …</a>
                    </li>
                    <li><a href="#">Konvertieren mit...

CSS

body {
    padding-top: 70px;
}
.list-group-vendor-files .list-group-item {
    line-height: 2.5;
}
.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;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}
input[readonly] {
    background-color: white !important;
    cursor: text !important;
}

JavaScript

$(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]);
});

$(document).ready(function () {
    $('.btn-file :file').on('fileselect', function (event, numFiles, label) {

        var input = $(this).parents('.input-group').find(':text'),
            log = numFiles > 1 ? numFiles + ' files selected' : label;

        if (input.length) {
            input.val(log);
        } else {
            if (log) alert(log);
        }

    });
});