CODEWITHSUNDEEP
jquery
cg22
cg22

Reputation: 355

How can I trim the length of a filename in JavaScript but keep the extension?

For example, I have some files that are uploaded to my server with huge names, like this:

1507633_519504261504361_1763887042_n.jpg

In this case, the display length is too long and messes up the format of the page. I'd like it to be trimmed to keep the first few characters (say the first 10) but still keep the .jpg at the end so people know the extension.

1507633_519504261504361_1763887042_n.jpg (before)

1507633_51.jpg (after)

Is there a relatively straightforward way to do this?

Upvotes: 5

Views: 11376

Answers (7)

Flash Noob
Flash Noob

Reputation: 510

other accepted answers did not handle multiple "." characters or file formats more than 3, this works in all cases

  function truncateMiddleOfLongFileNames(fileName) {
  const filesizeLimit = 150;
  let name = fileName.split('.');
  let extension = name.pop();
  name = name.join('.');

  if (fileName.length < filesizeLimit) {
    return fileName;
  } else {
    let findSizeLimitExcludingExtension = filesizeLimit - extension.length;
    name = `${name.substring(0, findSizeLimitExcludingExtension - 1)}.${extension}`;
    return name;
  }
}

Upvotes: 0

Gino
Gino

Reputation: 1133

Below is a function that removes the middle of all names 25 chars of length or greater and leaves them otherwise. You could easily adjust the limit here

  • This will return the first 15 chars before the extension followed by ... and the 3 chars preceding the extension as well as the extension its self
  • This handles cases where filenames have multiple .s in them
  function truncateMiddleOfLongFileNames(fileName) {
    let fileNameLength = fileName.length;

    if (fileNameLength < 25) {
      return fileName;
    } else {
      let extensionDelimiterIndex = fileName.lastIndexOf('.');
      let middleRemovedName = `${fileName.substring(0,15)}...${fileName.substring(extensionDelimiterIndex - 3)}`
      return middleRemovedName;
    }
  }

It could be used as follows

fileName = 'this_is_too_long_and_i_need_to_fix_it.png';

shortenedFileName = truncateMiddleOfLongFileNames(fileName);

to return

'this_is_too_lon..._it.png'

Upvotes: 1

kuzey beytar
kuzey beytar

Reputation: 3226

Front-end approach would be to put three dots in the middle.

function getFileName (str) {
  if (str.length > 22) {
    return str.substr(0, 11) + '...' + str.substr(-11)
  }

  return str
}

Example usage:

getFileName('calm-handsome-man-profile-modern-haircut-178790527.jpeg')

// Output:
// calm-handso...790527.jpeg

Upvotes: 3

Rymbek Izgali
Rymbek Izgali

Reputation: 1

var file_name = file.name;
var arr_filename = file_name.split('.');
var file_ex = arr_filename[ arr_filename.length-1  ];
if ( file_name.length > 14 ) {
   file_name = file_name.substr(0,7) + '...' + file_name.substr(-7);
}

There is an error in the responses. the file extension is the last element in the array, because there may be several dots in the file names.

Upvotes: 0

Muhammad Bilal
Muhammad Bilal

Reputation: 3018

Trim file name, if you have a list of elements with file name and then join extension with trim file name

    <script src="js/jquery.js"></script>
    <script>
     $(document).ready(function(){
                    $('.uploadFilesItemHeader').find('#fileName').each(function() {
                    var fileNames = this.innerText;
                    var leftRightStrings = fileNames.split('.');
                    //file name
                    var fName = leftRightStrings[0];
                    //file extension
                    var fExtention = leftRightStrings[1];
                    var lengthFname = fName.length;
                    //if file name without extension contains more than 15 characters   
                    if(lengthFname > 15){
                        $(this).html(fName.substr(0,10) + "..." + fName.substr(-5) + "." +fExtention);
                    }    
        }); 
}); 
    <script>

See result in image:

Upvotes: 3

Raul Rene
Raul Rene

Reputation: 10290

Well, you split the string by the dot, to split the extension from the filename (assuming you don't have files which contain . in their name):

var split = initial.split('.');
var filename = split[0];
var extension = split[1];

Then, you shorten the length of the filename:

if (filename.length > 10) {
    filename = filename.substring(0, 10);
}

Last, you concatenate them together.

var result = filename + '.' + extension;

Edit: This is plain Javascript, no jQuery required for this.

Upvotes: 5

John
John

Reputation: 417

What you're wanting to accomplish is to rename your files to have a shorter name. This would be a server-side task that jQuery wouldn't be associated with. You could call a server-side script with AJAX that renames, saves and sends back the new filename (which you can then use in jQuery), but this is a pretty bad idea. You're better off renaming the files after they're generated (wherever they're coming from), saving them down, and linking to the new filename directly in your HTML.

Upvotes: -1

Related Questions