Open file dialog when input type button

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/

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"/>

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> </button> <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.

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" />

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> } 

@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>

EDIT:

@AgainPsychoX, We can use a custom style for the button if it is possible

button { all: unset; label { padding: 2px 6px; border: 1px solid gray; border-radius: 3px; background-color: #f0f0f0; font-family: Arial; font-size: 13.5px; } &:hover, &:focus-within { label { border: 1px solid #4b4b4b; background-color: #e5e5e5; } } }

<button> <label for="fileUpload2">Upload</label> </button> <input type="file" id="fileUpload2" style="display: none" />

@Animal Rights, I think we can't go ahead with this approach if we want to use keyboard.

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.

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();" /> 

You can also do it like this ...

<label><!--style the label to look like a button--> Choose some file <input type="file" style="display:none;"><!--style this to be hidden--> </label>