Display Filename when a file is selected in a File Upload Element

I have a form that asks the customer to upload files as the start of an Application process.
When they click on the file and select it from their computer, it isselected and does get emailed to me. However, the filename they selected is not showing so it looks like they have not selected the file.

Is it possible to show the filename once selected ?

Many thanks
Mike Stark

Hi @Mike_Stark,

could you please send us an example, how it looks like and which browser do you use?

Hi Martin.
Thanks for the reply. Below is a screenshot. The page is : Apply Now - affordcash.co.za


I had selected the Copy of ID. If I hover over the “Browse” it shows the filename selected, but does no show anywhere. The average user would not know whether they have correctly selected an attachment or not.
I am using Firefox.

Thanks
Mike Stark

Hi @Mike_Stark, I can reproduce it on Firefox and it works for every other browser.

Could you please add the following code to your website CSS and see if it shows the file name:

input[type=file] {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip!important;
	width: 250px;
}

Please note, that you have to publish the website again, if you work with the Sitejet Website Builder for Plesk/cPanel.

Thank you so much Martin.

Works great now. Appreciate the help

Regards
Mike Stark

1 Like