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>