When we deal with file uploading in our code, we cannot control the number of characters that end-users named their files. Then there would be problems where the name is too long that it could break your design! As a frontend engineer, that is not what we want for our product and we will need to foresee possibilities of end-users uploading files with long name.
Here are two examples of this situation:
I understand that a solution for this issue is to use ellipsis like the image below:
However, a downside to this issue is the file extension is hidden which is bad for UX. What we can do with this is to mask the name to show a few characters but still showing the file extension like below:
How do we do this? Let’s make a helper function so that we could use this anywhere in the codebase.
The extensions array are being passed to the array to allow flexibility of the helper. To use the helper, we will need to pass the array of extensions that are allowed for your business requirements.
Then, on line 7 we loop through the extensions array to find the file extension of the uploaded file name. From here, we will separate the name and the file extension, then we mask the name with asterisks if the name has more than 10 characters.
And voila! You’ve shortened the uploaded file! I also would like to note that if you are masking right after end-users uploaded the file, you could actually get the extension type and also the file name separately. This logic is for when you have the file name in a string form, with the file extension combined :)
Thanks for reading! Don’t forget to follow me if you would like more Javascript tips :)
