How to hide text field in Html File Upload

Question

I am wondering how to hide the text field portion of a standard html file upload tag

for example

<input type="file" name="somename" size="chars">

This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.

score 35 · Answer 1 · answered Feb 11 '13 at 06:01

35

This will surely work i have used it in my projects.I hope this helps :)

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

answered Feb 11 '13 at 06:01

shiba

2,859
1
15
9

Great just what I needed ;) – Leroy Meijer May 17 '13 at 10:28
This solution will not degrade gracefully when JS is disabled. – sdgfsdh Nov 06 '17 at 16:28

score 30 · Accepted Answer · answered Jan 09 '10 at 20:32

30

I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.

You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).

answered Jan 09 '10 at 20:32

Josh Anderson

5,975
2
35
48

5

This doesn't appear to work in IE. IE outputs an error once the upload is started. – Raj May 02 '12 at 20:54
1

Works as of IE10. IE9 and below does not allow tempering the file input field by JS. – Simon Steinberger Sep 23 '13 at 08:37
IE 10 today blocks with access denied when delegating clicks from one button to the file input element, better to get an opacity = 0 overlaid on top of your ui: http://stackoverflow.com/questions/18624863/ie10-must-click-2-times-to-submit-form-after-choosing-a-file-to-upload – Kirk B. Nov 13 '13 at 23:21

score 19 · Answer 3 · answered Jan 11 '16 at 17:34

19

The easiest way as not mentioned in any answer would be to use a label for the input.

<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>

input[type="file"] { display: none; }

Using label will be useful because clicking on the label is clicking on the input. This will only work when input's id is equal to label's for attribute.

answered Jan 11 '16 at 17:34

Farzad Yousefzadeh

2,461
1
20
27

1

Best part is that you do not have to put any extra logic in JS. – Rehmat Jan 02 '21 at 04:56

score 1 · Answer 4 · answered Jan 09 '10 at 20:34

1

You can put an image as a background for the button. That worked for me, a while ago.

answered Jan 09 '10 at 20:34

ksemeks

1,778
3
15
17

score 1 · Answer 5 · answered Jan 09 '10 at 20:40

1

The file input button is extremely difficult to style and manipulate, mainly for security reasons.

If you really need to customize your upload button, I recommend a Flash based uploader like SWFUpload or Uploadify that enables you to use a custom image as button, display a progress bar, and other things.

However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.

answered Jan 09 '10 at 20:40

Pekka

442,112
142
972
1,088

Thanks, but unfortunatly I am locked into the way my client designed the site.. which is a simple image button to bring up the file dialog. – dswatik Jan 09 '10 at 21:43
This could be done quite reliably using a Flash uploader. But if Shaun Inman's article works and degrades gracefully, that should do nicely. – Pekka Jan 09 '10 at 22:06

score 0 · Answer 6 · answered Jun 26 '14 at 11:01

0

DEMO

Pure css and html

The trick is to use a button above the input file button.

Plus, you should set

filter: alpha(opacity=0);

to the input file.

answered Jun 26 '14 at 11:01

William Kinaan

28,059
20
85
118

score 0 · Answer 7 · answered Jun 02 '15 at 12:32

You could possibly hide the whole element and show a button or link instead. This is rather easy.

<input type="file" name="file" id="fileupload" style="width:200px; display:none;" onchange="submitmyform();" />
<input type="button" value="Select an Image" onclick="$('#fileupload').click();" />

The file upload element is hidden. The button will fire the click event and shows the file browser window. On selecting a file, the change event is fired and this can submit a form or call a script function, whatsoever.

Hope this helps...

score 0 · Answer 8 · answered Jun 08 '16 at 20:10

If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field

It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png" will restrict selecting file types except jpg and png images.

score 0 · Answer 9 · answered Dec 06 '16 at 17:47

0

Try adding this css to your input

    font-size: 0;

answered Dec 06 '16 at 17:47

nimatra

604
8
19

score 0 · Answer 10 · answered Apr 17 '20 at 09:06

Hello I get inspired by @shiba and here is solution in Angular 9:

    <input type="file" [id]="inputId" class="form-control" [style.display]="'none'"
        [accept]="acceptedDocumentTypes" [multiple]="true" #fileInput
        (change)="fileChange($event)" (blur)="onTouched()">

    <input type="button" class="form-control" value="Browse..." (click)="fileInput.click()"/>

fmansour · Answer 11 · 2020-06-22T08:56:02.480

0

you can set it's content to empty string like this :

<input type="file" name="somename" size="chars" class="mycustominput">

and in your css file :

.mycustominput:after{
    content:""!important;
}

edited Jun 22 '20 at 08:56

answered Jun 18 '20 at 08:40

fmansour

555
3
17

Christopher · Answer 12 · 2021-11-11T11:19:08.867

You can hide the text behind the button changing the buttons width to 100% using the webkit-class. The button will then overlap the <span> behind itself on the shadow-root.

There is no need to apply any opacity, transparency or hidden attribute to the button, it's just a bit different to style compared to other objects and this will keep the localisation of the form element alive.

This will do the trick and is supported (MDN):

input[type=file]::-ms-browse { /* legacy edge */
  width: 100%;
}

input[type=file]::file-selector-button { /* standard */
  width: 100%;
}

input[type=file]::-webkit-file-upload-button { /* webkit */
  width: 100%;
}

score 0 · Answer 13 · edited May 23 '17 at 11:54

input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px);  } /* Hide input field */
@-moz-document url-prefix()
  {
  input[type="file"] { clip: rect(0, 265px, 22px, 125px);  } /* Mozilla */
  }
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */

This will do the same without JavaScript, but requires absolute positioning to use the clip property.

References

How to hide text field in Html File Upload

13 Answers13

Linked

Related