CSS: How to hide file input but keep the filename?

Question

I want to hide the file input "Choose file" button but I want to keep the filename. How can I do this?

<input
  name="upload"
  id="upload-input"
  placeholder="Select a file"
  ref="fileInput"
  type="file"
  required>

This isn't tagged javascript - is that acceptable? If so, this has been asked / answered: https://stackoverflow.com/questions/35819391/css-hide-choose-file-button-but-display-file-after-select — random_user_name, Jan 31 '18 at 17:36

score 2 · Answer 1 · edited Jan 31 '18 at 20:07

2

You can save the file name to another html element and then hide the choose file input like this.

function getFileName()
{
var x = document.getElementById('upload-input')
x.style.visibility = 'collapse'
document.getElementById('fileName').innerHTML = x.value.split('\\').pop()
}

<input
  name="upload"
  id="upload-input"
  placeholder="Select a file"
  ref="fileInput"
  type="file"
  required 
  onchange="getFileName()"><span id="fileName"></span>

edited Jan 31 '18 at 20:07

VXp

11,598
6
31
46

answered Jan 31 '18 at 17:26

Scath

3,777
10
29
40

1

You can use x.value.split('\\').pop() for filename instead of path – JasonB Jan 31 '18 at 17:29
OP doesn't have the question tagged with javascript.... your solution requires javascript... might be worth clarifying if javascript is OK, and / or if it's possible / not possible with pure HTML / CSS. – random_user_name Jan 31 '18 at 17:35
Additionally, if JS is the answer, then this should be closed as duplicate (https://stackoverflow.com/questions/35819391/css-hide-choose-file-button-but-display-file-after-select) instead of posting a new answer – random_user_name Jan 31 '18 at 17:37

ild flue · Answer 2 · 2018-01-31T17:35:48.087

0

Add a new component at the place:

 <span id='upload-file-name'></span>

With JavaScript, to get the file name first

var em = document.getElementById("upload-input");
var fname = em.name;

Hide the file upload input field

em.style.display = 'none';

Put the file name to this new component

document.getElementById("upload-file-name").innerHTML = fname;

edited Jan 31 '18 at 17:35

answered Jan 31 '18 at 17:29

ild flue

1,323
8
9

OP doesn't have the question tagged with javascript.... your solution requires javascript... might be worth clarifying if javascript is OK, and / or if it's possible / not possible with pure HTML / CSS. – random_user_name Jan 31 '18 at 17:35
Additionally, if JS is the answer, then this should be closed as duplicate (https://stackoverflow.com/questions/35819391/css-hide-choose-file-button-but-display-file-after-select) instead of posting a new answer – random_user_name Jan 31 '18 at 17:37
@cale_b The OP did not put limitation on any possibility. – ild flue Jan 31 '18 at 17:37
Absolutely OP did: the tags indicate the technologies that are desired. that's what tags are for. You wouldn't post a PHP answer to a question tagged Ruby.... – random_user_name Jan 31 '18 at 17:39

Adria_ · Answer 3 · 2022-07-27T10:55:03.147

you could use the color attribute in transparent in css to hide the letters of the filename but the button does not know

.inputfile{
  opacity: 0;
}

<input
  name="upload"
  id="upload-input"
  placeholder="Select a file"
  ref="fileInput"
  type="file"
  class="inputfile"
  required>

If you want to hide it you must put: display: none; But everything will be hidden without being able to use it. But if you want it to be invisible by regulating the opacity and adjusting the input it can work for you. But if you want to hide the button and the letters you can not put color: "any color"

CSS: How to hide file input but keep the filename?

3 Answers3