OSX-style filename truncation with JS
I was recently implementing the specs for a file uploading UI when I encountered this interesting bit. (Fig. 1)
Once a file has been uploaded, the box in Fig. 1 needs to appear in the UI displaying a file type icon, the name of the user who uploaded the file, and the filename itself. The filename should be truncated if it’s too long for its containing box, however, it should always show the file extension.
At first I thought this would be a fairly trivial task, but in the end the solution involved a few steps and was kind of interesting. The result is an ES6 module, as seen in the extra-commented gist below.
So, after importing the ellipsisify function, calling
ellipsisify('whoa-this-is-a-crazy-long-filename.png')will give you the return value
'whoa-thi…filename.png'If you like building cool things, collaborating with a super talented team, and want to work at a company with a great culture, 7Geese is hiring.
