Custom not working in IE

Question

I'm trying to use a custom < input type="file" > button. This works in chrome and FF. How do I make it work in IE 10 and above?

The problem in IE is that the browse box is not opening.

html:

<button type="button" id="fileT"><input type="file" id="file"></button>

css:

#fileT{
    overflow: hidden;
    position: relative;
}
#fileT input {
    position: absolute;
    opacity: 0.1
}

the Browse box is not showing. – Fergoso Sep 23 '14 at 09:48 — Fergoso, Sep 23 '14 at 09:48
which version of IE..please include in question.. – Hitesh Sep 23 '14 at 09:50 — Hitesh, Sep 23 '14 at 09:50
I'm using IE version 10. I just updated my post. thanks. – Fergoso Sep 23 '14 at 09:51 — Fergoso, Sep 23 '14 at 09:51

Andrea Ligios · Accepted Answer · 2014-09-23T10:02:27.530

2

I've got what you mean: since <input type="file"/> is hard to style, you need a container. Then try using a <div> instead of a <button>.

Just ensure you specify height and width since the div content will be absolutely positioned (and hence stripped from the flow).

Running demo:

<div id="fileT">
    <input type="file" id="file" />
</div>

#fileT{
    overflow: hidden;
    position: relative;
    width: 75px;
    height: 50px;
}
#fileT input {
    position: absolute;
    opacity: 0.5;
}

edited Sep 23 '14 at 10:02

answered Sep 23 '14 at 09:56

Andrea Ligios

49,480
26
114
243

Thanks. Why
and not
– Fergoso Sep 23 '14 at 10:08
[` – Andrea Ligios Sep 23 '14 at 10:15

Guruprasad J Rao · Answer 2 · 2014-09-23T10:00:52.237

0

Just remove that button and try with just input tag.. It works..

Like this

<input type="file" id="file" value="Browse"/>

if you want to have your custom button then you have to remove position:absolute and keep opacity:0

edited Sep 23 '14 at 10:00

answered Sep 23 '14 at 09:54

Guruprasad J Rao

29,410
14
101
200

Thanks, but the `< button >` tags are important as I'm trying to create a customised button. – Fergoso Sep 23 '14 at 09:56
Bro.. I think that might be an IE problem.. Might b u have to follow different approach.. – Guruprasad J Rao Sep 23 '14 at 10:08
As 'V2Solutions''s answer there seems to be a bug in IE. Any suggestions other suggestons to have a custom browse button? – Fergoso Sep 23 '14 at 10:17
@Fergoso.. This link might help you.. http://stackoverflow.com/questions/15519223/how-can-i-customize-the-browse-button + this too... http://stackoverflow.com/questions/21842274/cross-browser-custom-styling-for-file-upload-button and http://codepen.io/wallaceerick/pen/fEdrz – Guruprasad J Rao Sep 23 '14 at 10:49

score 0 · Answer 3 · answered Sep 23 '14 at 09:57

0

I think this approach is wrong. The input field <input type="file"> should not include inside the <button>.

This will work.

<input type="file" id="file">

answered Sep 23 '14 at 09:57

Kirubanandan Kanagaraj

67
1
2
9

Thanks. That sure works but I need a custom styled button instead of the standard one. – Fergoso Sep 23 '14 at 10:14
Okay.. Anyway you got answer. :) – Kirubanandan Kanagaraj Sep 23 '14 at 11:38

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

Try this way:-

<input type="file" id="file" multiple="true"/>
    <button type="button" id="fileT">Upload</button>

OR

It might be version problem.

Updated1:-

This is bug from IE 10 Desktop.To be more specific here's the IE 10 Desktop version:

Version: 10.0.9200.16540
Update Versions: 10.0.4 (KB2817183) 
Product ID: 00150-20000-00003-AA459

Refer This

Updated2:- Html:

<div id="wrapper">
    <div id="button">Upload</div>
    <input type="file" id="file" multiple="true"/>
</div>
<div id="notice">Nothing to upload</div>

Css:

#button
{
   
    width: 100px;
    height: 50px;
    background-color: #0f0;
}

#wrapper
{
    width: 200px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
}

Fiddler

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 23 '14 at 09:58

V2Solutions - MS Team

1,129
6
6

you are using IE 10 Desktop or Metro? – V2Solutions - MS Team Sep 23 '14 at 10:00
Thanks for the info. YOur suggestion did not work. Does this mean that a custom button is not allowed in IE10+? – Fergoso Sep 23 '14 at 10:13

score 0 · Answer 5 · answered Sep 23 '14 at 10:19

0

You do not need to surround the input tags with button tags, as the input for file upload automatically creates a browse button for you. When you click it in IE you are just clicking the empty button and not the browse one created by the input which is why it is not doing anything. So instead of:

<button type="button" id="fileT"><input type="file" id="file"></button>

Replace simply with:

<input type="file" id="fileT">

answered Sep 23 '14 at 10:19

Thanks. My requirement is a custom styled button instead of the standard one. Example: my above code in chrome. – Fergoso Sep 23 '14 at 10:23
1

Well in that case I suggest you style the input tag using CSS rather than a button, as this is not really meant to be used like this, in essence you are using a button as the background for another button. – Sep 23 '14 at 10:31
Yes I have to avoid buttons here, I think that's the way to go. – Fergoso Sep 23 '14 at 10:38

score 0 · Answer 6 · answered Nov 07 '19 at 08:20

var input = document.getElementById('Selectfile');
if (!input) {
    input = document.createElement('input');
    input.type = 'file';
    input.id = "Selectfile";
    document.body.appendChild(input);
}
input.onchange = function (e) {
    var file = e.target.files[0]; 
};
input.click();

Custom not working in IE

6 Answers6

Linked