CODEWITHSUNDEEP
javascripthtml
Amin Uddin
Amin Uddin

Reputation: 1006

Open file dialog when input type button

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

Upvotes: 12

Views: 65444

Answers (9)

apestogetherstrong
apestogetherstrong

Reputation: 31

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>

Upvotes: 0

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3560

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

Upvotes: 1

Ever Dev
Ever Dev

Reputation: 2162

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.

Upvotes: 5

Ampomah Winston
Ampomah Winston

Reputation: 31

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

Upvotes: 1

ayman lys
ayman lys

Reputation: 169

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

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388436

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

Upvotes: 16

Amin Uddin
Amin Uddin

Reputation: 1006

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

Upvotes: 0

Rich
Rich

Reputation: 301

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.

Upvotes: 0

p e p
p e p

Reputation: 6674

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/

Upvotes: 41

Related Questions