Open file dialog when input type button

Question

In html we know using input type file we get file dialog to select file. Is there any way to open file dialog using input type button? We used

<input type="file" class="file" name="attachement" />

But I want to use

<input type="button" class="file" name="attachement" />

answer can see here. It's working [http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input](http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input/36281035#36281035) — A.K., Mar 29 '16 at 10:31

score 38 · Answer 1 · answered Nov 12 '14 at 03:45

38

Yes - you can hide the input type="file" but still have it in your markup. You then show a regular button on your page and onclick of that button, you programmatically trigger the click event of your actual file input:

<input id="fileInput" type="file" style="display:none;" />
<input type="button" value="Choose Files!" onclick="document.getElementById('fileInput').click();" />

Fiddle: http://jsfiddle.net/cnjf50vd/

answered Nov 12 '14 at 03:45

p e p

6,593
2
23
32

@p e p, But I want to avoid input type file in my page. – Amin Uddin Nov 12 '14 at 03:52

score 16 · Answer 2 · edited Feb 20 '18 at 08:21

You can use a button and a hidden file element

function openAttachment() {
  document.getElementById('attachment').click();
}

function fileSelected(input){
  document.getElementById('btnAttachment').value = "File: " + input.files[0].name
}

<input type="file" class="file" id="attachment" style="display: none;" onchange="fileSelected(this)"/>
<input type="button" class="file" id="btnAttachment" onclick="openAttachment()" value="File"/>

score 4 · Answer 3 · answered Dec 09 '20 at 17:43

4

To open a file dialog, you need a file input.

Here you can open it when clicking a button without writing any JavaScript code.

<button type="button">
  <label for="file">
    Open File Dialog
  </label>
</input>
<input type="file" id="file" style="display:none;"/>

The point of this solution is to use the label element and its for attribute. You should make the label to cover the full button to give a perfect solution.

answered Dec 09 '20 at 17:43

Ever Dev

1,882
2
14
34

1

This should be the correct solution! Yet there are some issues with the code – Shanika Ediriweera Oct 14 '22 at 08:51

ayman lys · Answer 4 · 2019-01-09T14:50:53.600

3

U couldn't really open file dialog when the type is a button.. U can only use by default type="button" and on mouse over the button, the type will change to type='file' like that :

<input type="button" class="file" name="attachement" onmouseover="(this.type='file')" onmouseout="(this.type='button')" value="Choose file" />

edited Jan 09 '19 at 14:50

answered Jan 09 '19 at 14:10

ayman lys

159
4

score 0 · Answer 5 · answered Nov 12 '14 at 03:46

no. the type attribute of input specifies what type of element you are dealing with (IE: checkbox, radio, button, submit, etc), so you have to specifically state file if you want the file dialog to open. if you want a button, then you specify the input type as a button.

that's not to say you can do workarounds, but setting input type to button is not possible to force a file dialog off that button alone.

score 0 · Answer 6 · answered Nov 12 '14 at 04:16

Hence I want to avoid type file in html of a input so I forced to change such type in runtime

<input id="fileInput" type="button" style="display:none;" />
<input type="button" value="Choose Files!" onfocus="document.getElementById('fileInput').type='file'" onclick="document.getElementById('fileInput').click();" />

score 0 · Answer 7 · answered Nov 19 '22 at 20:41

0

In React this is how is done

 const inputer = useRef()
 function ClickComponent(){
   return <div>
       <input ref={inputer} />
       <button onClick={inputer.current.click()}>Click me </button>
   </div>
 }

answered Nov 19 '22 at 20:41

Ampomah Winston

21
2

OP does not seem to use React. This code is equivalent to answers submitted by others in vanilla JS in that it triggers a click event on an `input[type=file]` element. – undefined Nov 25 '22 at 08:54

score 0 · Answer 8 · answered May 10 '23 at 08:02

@Ever answer is better because it doesn't use javascript, but it has some issues as @Shanika said. To function we have to click on the button text, not the button. So I guess we can wrap it all with a label element. But it doesn't work yet. Next, we can wrap the button element with a div element and add pointer-events:none.

<label for="fileUpload">
  <input type="file" id="fileUpload" style="display:none;" />
  <div>
    <input type="button" value="Upload" style="pointer-events:none;" />
  </div>
</label>

Open file dialog when input type button

8 Answers8

Linked