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>

Answer 1

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>

Answer 2

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;