How to display 1 file selected instead of displaying name in input type=file in html

Posted by Kasani007 under HTML 5 on 4/12/2017 | Points: 10 | Views : 183 | Status : [Member] | Replies : 1
If the file name is so large, then in mozilla firefox , it is displaying full name. as per my requirement it should not display full name if i select a single file...
if i select multiple files it is ok, it is displaying no. of files selected.
but if i select single file, it is displaying full name at input type=file control..

please help me to display 1 file is selected, if i select single file..

<input type="file" id="file1" name="file" multiple ng-files="getFiles($files)" />


Posted by: Kasani007 on: 4/13/2017 [Member] Starter | Points: 25

i used css to truncate the file name i.e.,

.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

and used in input type=file

<input type="file" id="file1" class="truncate" name="file" multiple ng-files="getFiles($files)" />

now, if i selected the single file with more length, it is truncating in mozilla...its working fine

Kasani007, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response