Custom, cross-browser file upload button

Question

I've used the following code from a question on here to apply custom styling to file upload buttons.

<p id="avatar-upload">
    <label for="file" class="custom-file-upload">
        Browse Files
    </label>
    <input type="file" name="file" id="file" />
    <input type="submit" name="upload" id="upload" value="<?php esc_attr_e( 'Upload Image', 'buddypress' ); ?>" />
    <input type="hidden" name="action" id="action" value="bp_avatar_upload" />
</p>

The css is:

input[type="file"] {
    display: none;
}

I can click on this label and it brings up the file upload modal. However when I choose a file and click OK the filename is no longer displayed on the front-end, so the user wouldn't know to click 'Upload Image'. I've tested in Firefox and Chrome with the same result.

you said: "I can click on this label and it brings up the file upload modal. However when I choose a file and click OK nothing happens.". Have you bound that button to the click event? the button and the modal are dynamically generated, meaning when the initial DOM was created they were not there. So the events have to be delegated to the new DOM structure — Sai
– Sai, Commented Apr 15, 2015 at 14:57
Thanks for the suggestion. It seems it is working but isn't displaying the filename on the front-end, which confused me. I've edited the original question to reflect this. — Ian Butler
– Ian Butler, Commented Apr 15, 2015 at 15:04

Mehdi Brillaud · Accepted Answer · 2015-04-15 15:10:27Z

I've made this one few weeks ago. Hope it helps.

Codepen : http://codepen.io/mbrillaud/pen/dPdKOG

HTML:

<div class="wrapper">
    <h1>Stylized file input</h1>
    <label class="mybutton" for="fileupload">Button</label>
    <input class="fileupload" id="fileupload" type="file"/>
    <p id="fileinfo"><span></span></p>
</div>

SCSS:

$wetAsphalt: #34495e;
$pumpkin: #d35400;
$clouds: #ecf0f1;
$width: 300px;

body{
    font-family: arial, sans-serif;
    background-color: $wetAsphalt;
}

.wrapper{
    width: $width;
    padding: 12px;
    background-color: $clouds;
    margin: 0 auto;
    @include border-radius(5px);

   .fileupload{
        visibility: hidden;
   }
   .mybutton{
       display: block;
       width: 100px;
       text-align: center;
       margin: 0 auto;
       border-radius: 2px;
       padding: 6px;
       background-color: $pumpkin;
       font-size: 32px;
       color: white;
       cursor: pointer;
       @include user-select(none);
   }

   #fileinfo{
   height: 20px;
   text-align: center;
   }
}

JS (just to get the input value) :

$('#fileupload').on('change', function(){
    $('#fileinfo').text($(this).val());
});

nlangerdev · Accepted Answer · 2015-04-15 15:01:08Z

0

Don't know if this will help but for my uploads I used a script called 'uploadifive' it uploads to a specific area on your webserver and allows you to then create a fileview system to see the upload images.

Also is that button bound to the event?

EDIT:: JUST NOTICED THE COMMENT BY SAI

answered Apr 15, 2015 at 15:01

nlangerdev

1321 silver badge15 bronze badges

Comments

Pavan Kumar · Accepted Answer · 2015-04-15 15:05:13Z

0

As you're referring to cross browser solution, would suggest something we did in one of the apps.

Default input file box looks different on various browsers, and hence the webpage appearance differs spoiling the aesthetics. What we did was a input file hidden in an invisible span and a custom button which appears to the user. visible button will have an onclick action which programatically clicks the hidden input file field.

This is an age old solution, but something better might exist now a days.

answered Apr 15, 2015 at 15:05

Pavan Kumar

4,9104 gold badges35 silver badges50 bronze badges

Collectives™ on Stack Overflow

Custom, cross-browser file upload button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related