Custom upload button with CSS & JavaScript

Question

I'm trying to code a custom upload button. I've hidden the regular one and then put a div with image background over the top.

It works great but I want to fill the (disabled) input field below with the file name once the user selects a file but it's not working.

JavaScript:

document.getElementById("upload_button").onchange = function () {
document.getElementById("upload_file").value = this.value;
};

HTML:

<div id="Form_FileInput_Container"><input type="file" id="upload_button" /></div>
<input class="Form_Input" id="upload_file" placeholder="Choose File" disabled="disabled" />

CSS:

#Form_FileInput_Container { position: relative; width: 100px; height: 100px; background: #e5e5e5 url('path/to/upload/image/forms_upload.png') no-repeat; border: 1px solid #cccccc; }
#Form_FileInput_Container input { filter: alpha(opacity=0); opacity: 0; width: 100px; height: 100px; }

Any help is most appreciated :)

Tried to reproduce with your code here (fiddle) but it works, so I'm guessing you're executing JavaScript at the wrong time — Paul S.
– Paul S., Commented Apr 12, 2014 at 11:44

Paul S. · Accepted Answer · 2014-04-12 11:37:07Z

4

Make sure you attach your JavaScript after the elements exist.

<input id="foo" type="file" />
<input id="bar" type="text" placeholder="Choose File" disabled />

// after elements exist
var foo = document.getElementById('foo'),
    bar = document.getElementById('bar');

foo.addEventListener('change', function () {
    var slash = this.value.lastIndexOf('\\');
    bar.value = this.value.slice(slash + 1);
});

DEMO

answered Apr 12, 2014 at 11:37

Paul S.

66.6k9 gold badges130 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Noah Goodrich Over a year ago

Yeah this worked. I had the JavaScript before the elements, so maybe that was the issue. This works great though, thanks Paul S!

sss999 · Accepted Answer · 2018-02-25 03:42:46Z

0

HTML:

<input type="file" id="upload_button" onchange="cutomButton()" />

JS:

function customButton() {
    var z=document.getElementById("upload_button").value;
    document.getElementById("upload_file").value = z;
    alert(document.getElementById("upload_file").value);
}

edited Feb 25, 2018 at 3:42

answered Apr 12, 2014 at 11:42

sss999

5283 silver badges14 bronze badges

Collectives™ on Stack Overflow

Custom upload button with CSS & JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related