Custom Input File

Custom input file. IE8+, CH, FF.

by Lukas238

HTML

<script src="https://cdn.jsdelivr.net/gh/Lukas238/better-input-file/dist/betterInputFileButton.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a href="https://github.com/Lukas238/better-input-file"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
        
        
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            
<h1>Better-input-file-button</h1>

            <div id="example1">
                 <h3>Example1</h3>

                <p>Single input file.</p>
                <input type="file" /> <pre>
&lt;input type=&quot;file&quot; /&gt;
&lt;script&gt;
    $('#example1 input:file').betterInputFile();
&lt;/script&gt;
    </pre>

            </div>
            <hr>
            <div id="example2">
                 <h3>Example2</h3>

                <p>Multiple input files, but one with diferent inline options:</p>
                <input type="file" />
                <input type="file" />
                <input type="file" data-btnText="Upload image" data-placeholder="No image selected" /> <pre>
&lt;input type=&quot;file&quot; /&gt;
&lt;input type=&quot;file&quot; /&gt;
&lt;input type=&quot;file&quot; data-btnText=&quot;Upload image&quot; data-placeholder=&quot;No image selected&quot; /&gt;  

&lt;script&gt;
    $('#example2 input:file').betterInputFile({
        btnText: "Browse files"
    });
&lt;/script&gt;
    </pre>

            </div>
            <hr>
            <div id="example3">
                 <h3>Example3</h3>

                <p>Multifile input file and a call back to populate...

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    padding: 0 1em;
}
.betterInputFile {
    margin-bottom: 1em;
    max-width: 30em;
}

JavaScript

function init() {

    $('#example1 input:file').betterInputFile();

    $('#example2 input:file').betterInputFile({
        btnText: "Browse files"
    });


    $('#example3 input:file').betterInputFile({
        btnText: 'Select multiple files',
        placeholder: 'No files selected',
        multiple: true,
        afterSelect: function (filelist) {
            if (filelist.length < 1) {
                $('#list .panel-footer').html('');
                $('#list').addClass('hide');
                return;
            }

            $('#list').removeClass('hide');
            var output = '';
            $.each(filelist, function (key, file) {
                output += '<li>' + file.name + '</li>';
            });
            output = '<ul class="filelist">' + output + '</li>';
            $('#list .panel-footer').html(output);
        }
    });
    
    $('#example4 input:file').betterInputFile({
        btnLeft: false
    });

}

init();