input type=file layout for long filenames (ellipsis / extension)

RESOLVED FIXED

Status

()

enhancement
RESOLVED FIXED
2 years ago
7 months ago

People

(Reporter: karlcow, Assigned: mats)

Tracking

55 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [webcompat][fixed by bug 1495153])

Attachments

(1 attachment)

(Reporter)

Description

2 years ago
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
(Reporter)

Updated

2 years ago
Whiteboard: [webcompat]

Comment 1

2 years ago
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/
(Assignee)

Comment 2

7 months ago
Yes, this was just a bug in Firefox.  It's been fixed in bug 1495153.
Assignee: nobody → mats
Status: NEW → RESOLVED
Last Resolved: 7 months ago
Depends on: 1495153
Resolution: --- → FIXED
Whiteboard: [webcompat] → [webcompat][fixed by bug 1495153]
You need to log in before you can comment on or make changes to this bug.