Pretty file input field in Bootstrap

Jackie Martinez (#31103)

Twitter Bootstrap is great, but there are places where it just stops short. One of those is the file input field, where the guys at bootstrap (and probably rightfully so) – just
left it as the browser default.
The problem is – it makes your pretty bootstrap forms ugly.
No worries – the following can help:

Ninja edit: Look at the comments – there are some browser specific enhancements.
Ninja edit 2: Look at jasny’s fork for file-upload integrated into bootsrap and many more goodies!!

The code

<input id="lefile" type="file" style="display:none">
<div class="input-append">
<input id="photoCover" class="input-large" type="text">
<a class="btn" onclick="$('input[id=lefile]').click();">Browse</a>
</div>

<script type="text/javascript">
$('input[id=lefile]').change(function() {
$('#photoCover').val($(this).val());
});
</script>

So this is quite easy:

  1. Define a normal, hidden file input field, and a visible bootstrap-styled field that looks pretty.
  2. Attach an onclick to the pretty input, that makes it click the hidden one.
  3. When the pretty Browse button is clicked – it sends a click to the real file input. This will in turn pop up the file selection dialog.
  4. After the user selects a file, the hidden file input’s change() event is called. This will copy the value of the real (hidden) file
    input to the pretty one. We do this to mimic the behaviour of file input fields – that they show you the file name after it is selected.
  5. Voila!
Pretty file input with Twitter Bootstrap

Pretty file input with Twitter Bootstrap

69 thoughts on “Pretty file input field in Bootstrap

  1. Pingback: Jussie | Best Bootstrap Resources

  2. Pingback: iJussie | Best Bootstrap Resources

  3. Pingback: 最全的 Twitter Bootstrap 相关开发资料 - U·足迹

  4. Pingback: 上海深微网络科技有限公司 » 最全的 Twitter Bootstrap 开发资源清单

  5. Joanthan Wheat

    Make sure you add name=’file’ in the hidden file input – otherwise the file attachment will not get posted!
    if you copy and paste the code above, it won’t work.

    … that and the post has a misplaced , for me in firefox, all the code and steps are underlined and linked to the github page.

    great file upload box though, I’m using it in an app for the college I work for.
    -Jon

  6. T Philpott

    I’m new to twitter bootstrap/jquery/php web interfaces. I’m not seeing how the example code actually uploads a file to the web server, or where the path name can be modified to write it to a specific directory, etc. I’ve got the twitter bootstrap, the jquery bootstrap (bootstrap.file-input), and the jasny bootstrap (bootstrap-fileupload.js) on the system. I’m sure it’s something easy/stupid, but I’m not seeing how to get this to actually upload a file.

    The page has three tabs, the user can upload a file on each tab. The three tabs are set up the same way, so just posting code from one:

    From the home page -

    From the pane include page -
    <?php
    include_once 'fileupload.php';
    include_once 'functions.php';

    function RenderIDAssociationPane()
    {
    $process='idupload';

    echo "";
    echo "” . “\n”;
    echo ” ” . “\n”;
    echo ” Upload ID Association File:” . “\n”;
    echo DisplayFileUpload($process);
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” File Upload Status:” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” File Processing Status:” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” Output Files:” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo “” . “\n”;
    }
    ?>

    From the file upload page -
    <?php

    function DisplayFileUpload($processid)
    {
    echo " ” . “\n”;
    //echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” ” . “\n”;
    echo ” Browse” . “\n”;
    echo ” Upload/Process File” . “\n”;
    echo ” ” . “\n”;
    echo “” . “\n”;
    echo “” . “\n”;
    echo “$(‘input[id=" . $processid . "]‘).change(function() {” . “\n”;
    echo “$(‘#” . $processid . “PrettyCover’).val($(this).val());” . “\n”;
    echo “});” . “\n”;
    echo “” . “\n”;
    }
    ?>

    Any help would be appreciated, thanks!

  7. T Philpott

    Ok, it’s eating the html inside of the file on copy/paste. I’m not sure how to post the code, sorry.

    So just what bootstrap file(s) and javascript/jquery is being used with the above example to get it to actually upload file, modify upload directory, send information to a process bar, etc.

  8. T Philpott

    I’m sorry if my previous question wasn’t clear. Can you please show the code/function call(s) that is actually uploading the file to the web server? The demo code looks like it just copies the name of the selected file into the input next to the browse button. Thanks!

  9. StaticVoid

    @T_Philpott – Essentially, your hidden file input should be inside of a form with a submit button. Once the form is submitted you will need to capture the posted fields and then do what you will with the file (save to non-temp server location, manipulate it, delete it, etc.)

    Remember to use form attributes: method=”post” enctype=”multipart/form-data”

    Excellent work around!

  10. MVanella

    There are issues with doing this in IE with Ajax. Access is denied to the hidden input. Does anyone know of a way around this or are those of us who want to do ajax file uploads cursed with ugly input controls?

  11. MVanella

    There is a way to do this if you are submitting the form via ajax so that IE does not give an access denied. Instead of styling the input with a display: none, give it an opacity: 0. Then give the file input a z-index of 1 and the textbox and button a z-index of 0. This will accomplish the same thing. It’s slightly more work but it will work in the case of an ajax form submission.

  12. Pingback: bootstrap | cluo笔记

  13. Francisco Lopes

    Thanx for the tip!

    You can add an icon to make it even more pritty:

     Browse

    $(‘input[id=lefile]‘).change(function() {
    $(‘#photoCover’).val($(this).val());
    });

  14. Hamish McCallum

    Love the way this looks. Unhappily, it isn’t uploading a file. I know nothing (nothing!) about Javascript, so I don’t know if I’ve broken it that!

    I select a file: its address then appears on the text box as C:/fakepath/filename. When I hit Go!, the PHP script fails because there is no file.

    My form looks like this:

    Browse

    Go!

    And the JS looks like this:

    $('input[id=recfile]').change(function() {
    $('#recover').val($(this).val());
    });


    I know I’ve probably made some crass error, but I can’t see it…

  15. Hamish McCallum

    I assumed that tags would be possible inside , but they aren't. Perhaps it'll work with ordinary brackets:


    (form enctype="multipart/form-data" action="astrakhan.php" method="post")
    (fieldset)
    (input type="hidden" name="MAX_FILE_SIZE" value="2000000" /)
    (input id="recfile" type="file" style="display:none")
    (input type="text" name="date" class="input-large" placeholder="YYYY-MM-DD")
    (div class="input-append")
    (input id="recover" class="input-large" type="text")
    (a class="btn" onclick="$('input[id=recfile]').click();")Browse(/a)
    (/div)
    (button type="submit" class="btn")Go!(/button)
    (/fieldset)
    (/form)

  16. Hamish McCallum

    Please ignore my previous two posts: I was very tired, which explains:
    a) why I made such a mess of your comments, and
    b) why I failed to notice that I had no name set for the file input…

    So it now looks beautiful and upload works (in Chrome 32.0.1700.41 m Aura).

    But… when I select a file nothing appears in the text box. What might cause this?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>