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

1 Like