Hiding File Input UI

I wanted to overwrite the typical “Choose file” button of the <input> and got the below code to hide the standard and replace it with a Semantic-UI <Button>. However, I realised in hiding the original input button, I also hide the display of the file name (e.g. Screenshot…10.43.17PM). How might I hide the original button, but retain and manipulate the display of the selected file name?


Have you checked this page?
Roll down for the examples
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Examples

1 Like