I'm just creating this issue as a record of a couple of issues we get in Web Compatibility. I created a simple test on https://codepen.io/webcompat/pen/xdPyrv The issue is with and long filename which can't fit in the box once selected. <input type="file"> All browsers have different strategies on desktop with regards to this. * Firefox (Gecko): - Adds an ellipsis in the middle - Doesn't show the end of the filename * Safari (WebKit): - Adds an ellipsis in the middle - Shows the end of the filename WITHOUT the extension - Adds an icon relevant to the type of the file * Chrome (Blink): - Adds an ellipisis in the middle - Shows the end of the filename WITH the extension I'm not sure it is something we have to fix, but I would say that Firefox choice is probably the less sensible in terms of UI. Specifically for not showing the end of the filename. Some of the web compatibility issues. https://webcompat.com/issues/6435 https://webcompat.com/issues/5620 https://webcompat.com/issues/6764

If I may add my 2 cents, FF behavior looks more like a bug than a real feature. The truncating operation kicks in at what seems to be random range, and the end characters are cut off. https://i.stack.imgur.com/W2qJj.png https://jsfiddle.net/532zu6xx/

Yes, this was just a bug in Firefox. It's been fixed in bug 1495153.