click on input box to show open file dialog but not click on choose file button

Question

I have an input box and I want user to click on the input box to show the open file dialog and show the filename in the same input box. But if I use the input type="file", it will show the "choose file button", I dont wan to show the button. How can I do it?

html:

<div class="fileupload">
    <input type="file" class="file" name="image" />
</div>

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

http://jsfiddle.net/EctCK/ ** I dont wan this, how do I hide the choose file button?

Robbie Wxyz · Accepted Answer · 2016-08-16T22:50:14.187

13

You can overlay a transparent <input type="file"/> over a styled button or other element.

<input type="file" style="opacity:0;"/>

See this JSFiddle for a working demo.

edited Aug 16 '16 at 22:50

answered Oct 11 '13 at 05:00

Robbie Wxyz

7,671
2
32
47

1

this is a really creative hack! – guest Jun 24 '14 at 06:39
1

or you can call the click() method of a non-displayed within the div's onclick() for better croos-and-old-browser compatibility – tomasb Aug 25 '14 at 15:31
@SuperScipt how about if I don't want the open file dialog but instead the Save As dile dialog? – bleyk Jan 13 '16 at 01:55
1

@bleykFaust that's a totally different question, try searching around for content-disposition or data-URIs. – Robbie Wxyz Jan 13 '16 at 02:02
@SuperScript thanks but can you give me a sample if it's not too much to ask? – bleyk Jan 13 '16 at 02:22
@AnilPanwar this is my question im asking you a while ago – bleyk Jan 13 '16 at 07:01
The fiddle is no longer available `404` – Pathros Aug 16 '16 at 20:26
1

@pathros oops, my bad; thanks for letting me know. I've updated it to the new url. – Robbie Wxyz Aug 16 '16 at 22:51

score 7 · Answer 2 · answered Oct 11 '13 at 05:14

Well there is a little hack for this. You do need to have file upload control on the page. But you can hide it and simulate the file upload control using any other control like div/span/button and style it as you want. Here is a working sample on jsfiddle.

HTML:

<div id="dummy" class="dummyDiv"> 
    <span>click to chose file:</span> 
    <span id="fileName" class="yellow"></span>
</div>
<div class="wrapper">
    <input type="file" id="flupld" />
</div>

JS:

$("#dummy").click(function () {
    $("#flupld").click();
});

$("#flupld").change(function () {
    //file input control returns the file path as C:\fakepath\<file name>
    //on windows, so we remeove it and show only file name.
    var file=$(this).val().replace(/C:\\fakepath\\/ig,'');

    $("#fileName").text(file);
});

Is there a way to pre-select a filename? That is to say, when the dialog is open, one sees a "suggested" filename — Pathros, Aug 16 '16 at 20:29

score -1 · Answer 3 · answered Oct 11 '15 at 19:36

-1

try it:

<input type="file" id="upload" style="display:none">
   <a href="" onclick="document.getElementById('upload').click(); return false;"> Upload </a>

Working sample on JSFiddle

answered Oct 11 '15 at 19:36

S.Parseh

21
3

click on input box to show open file dialog but not click on choose file button

3 Answers3

Linked