How to get the file name from a full path using JavaScript

Question

Is there a way that I can get the last value  based on the     symbol  from a full path   Example   C  Documents and Settings img recycled log jpg  With this case  I just want to get recycled log jpg from the full path in JavaScript

User · Answer

Little function to include in your project to determine the filename from a full path for Windows as well as GNU Linux  amp  UNIX absolute paths           param  String  path Absolute path     return  String  File name     todo argument type checking during runtime     see https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Array includes     see https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Array slice     see https   developer mozilla org en-US docs Web JavaScript Reference Global Objects String lastIndexOf     example basename   home johndoe github my-package webpack config js       webpack config js      example basename  C   Users  johndoe  github  my-package  webpack config js       webpack config js      function basename path      let separator          const windowsSeparator           if  path includes windowsSeparator         separator   windowsSeparator        return path slice path lastIndexOf separator    1

User · Answer

A question asking  get file name without extension  refer to here but no solution for that  Here is the solution modified from Bobbie s solution   var name without ext    file name split       pop   split      pop   split       0

User · Answer

Not more concise than nickf s answer  but this one directly  extracts  the answer instead of replacing unwanted parts with an empty string   var filename               exec fullPath  1

User · Answer

lt html gt       lt head gt           lt title gt Testing File Upload Inputs lt  title gt           lt script type  text javascript  gt               lt  --             function showSrc                     document getElementById  myframe   href   document getElementById  myfile   value                  var theexa   document getElementById  myframe   href replace  file                           alert document getElementById  myframe   href replace  file                                         -- gt           lt  script gt       lt  head gt       lt body gt           lt form method  get  action       gt               lt input type  file                      id  myfile                      onChange  javascript showSrc                         size  30  gt               lt br gt               lt a href     id  myframe  gt  lt  a gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

In Node js  you can use Path s parse module     var path   require  path    var file     home user dir file txt    var filename   path parse file  base      gt   file txt

User · Answer

var file name   file path substring file path lastIndexOf

User · Answer

The following line of JavaScript code will give you the file name   var z   location pathname substring location pathname lastIndexOf      1   alert z

User · Answer

lt html gt       lt head gt           lt title gt Testing File Upload Inputs lt  title gt           lt script type  text javascript  gt               lt  --             function showSrc                     document getElementById  myframe   href   document getElementById  myfile   value                  var theexa   document getElementById  myframe   href replace  file                           alert document getElementById  myframe   href replace  file                                         -- gt           lt  script gt       lt  head gt       lt body gt           lt form method  get  action       gt               lt input type  file                      id  myfile                      onChange  javascript showSrc                         size  30  gt               lt br gt               lt a href     id  myframe  gt  lt  a gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

Another one  var filename   fullPath split           pop      Here split have a regular expression with a character class The two characters have to be escaped with      Or use array to split   var filename   fullPath split             pop      It would be the way to dynamically push more separators into an array  if needed  If fullPath is explicitly set by a string in your code it need to escape the backslash  Like  C   Documents and Settings  img  recycled log jpg

User · Answer

lt script type  text javascript  gt      function test                 var path    C  es h221 txt           var pos  path lastIndexOf  path charAt  path indexOf      1             alert  pos     pos            var filename   path substring  pos 1           alert  filename           lt  script gt   lt form name  InputForm        action  page2 asp        method  post  gt       lt P gt  lt input type  button  name  b1  value  test file button      onClick  test    gt   lt  form gt

User · Answer

I use     var lastPart   path replace           split       pop      It replaces the last   so it also works with folders

User · Answer

What platform does the path come from  Windows paths are different from POSIX paths are different from Mac OS 9 paths are different from RISC OS paths are different     If it s a web app where the filename can come from different platforms there is no one solution  However a reasonable stab is to use both      Windows  and      Linux Unix Mac and also an alternative on Windows  as path separators  Here s a non-RegExp version for extra fun   var leafname  pathname split       pop   split      pop

User · Answer

I use     var lastPart   path replace           split       pop      It replaces the last   so it also works with folders

User · Answer

Ates  your solution doesn t protect against an empty string as input   In that case  it fails with TypeError                      exec fullPath  has no properties   bobince  here s a version of nickf s that handles DOS  POSIX  and HFS path delimiters  and empty strings    return fullPath replace

User · Answer

var filename   fullPath replace                    This will handle both   OR   in paths

User · Answer

Successfully Script for your question  Full Test   lt script src    Scripts jquery-1 10 2 min js  gt  lt  script gt    lt p  title  text  id  FileNameShow   gt  lt  p gt   lt input type  file     id  myfile     onchange  javascript showSrc        size  30  gt       lt script type  text javascript  gt   function replaceAll txt  replace  with this        return txt replace new RegExp replace   g    with this      function showSrc         document getElementById  myframe   href   document getElementById  myfile   value      var theexa   document getElementById  myframe   href replace  file                var path   document getElementById  myframe   href replace  file                var correctPath   replaceAll path    20            alert correctPath       var filename   correctPath replace                          FileNameShow   text filename

User · Answer

The following line of JavaScript code will give you the file name   var z   location pathname substring location pathname lastIndexOf      1   alert z

User · Answer

Just for the sake of performance  I tested all the answers given here   var substringTest   function  str        return str substring str lastIndexOf      1      var replaceTest   function  str        return str replace                          var execTest   function  str        return             exec str  1      var splitTest   function  str        return str split       pop   split      pop       substringTest took   0 09508600000000023ms replaceTest   took   0 049203000000000004ms execTest      took   0 04859899999999939ms splitTest     took   0 02505500000000005ms   And the winner is the Split and Pop style answer  Thanks to bobince

User · Answer

What platform does the path come from  Windows paths are different from POSIX paths are different from Mac OS 9 paths are different from RISC OS paths are different     If it s a web app where the filename can come from different platforms there is no one solution  However a reasonable stab is to use both      Windows  and      Linux Unix Mac and also an alternative on Windows  as path separators  Here s a non-RegExp version for extra fun   var leafname  pathname split       pop   split      pop

User · Answer

In Node js  you can use Path s parse module     var path   require  path    var file     home user dir file txt    var filename   path parse file  base      gt   file txt

User · Answer

var filename   fullPath replace                    This will handle both   OR   in paths

User · Answer

Ates  your solution doesn t protect against an empty string as input   In that case  it fails with TypeError                      exec fullPath  has no properties   bobince  here s a version of nickf s that handles DOS  POSIX  and HFS path delimiters  and empty strings    return fullPath replace

User · Answer

Not more concise than nickf s answer  but this one directly  extracts  the answer instead of replacing unwanted parts with an empty string   var filename               exec fullPath  1

User · Answer

lt script type  text javascript  gt      function test                 var path    C  es h221 txt           var pos  path lastIndexOf  path charAt  path indexOf      1             alert  pos     pos            var filename   path substring  pos 1           alert  filename           lt  script gt   lt form name  InputForm        action  page2 asp        method  post  gt       lt P gt  lt input type  button  name  b1  value  test file button      onClick  test    gt   lt  form gt

User · Answer

Not more concise than nickf s answer  but this one directly  extracts  the answer instead of replacing unwanted parts with an empty string   var filename               exec fullPath  1

User · Answer

Successfully Script for your question  Full Test   lt script src    Scripts jquery-1 10 2 min js  gt  lt  script gt    lt p  title  text  id  FileNameShow   gt  lt  p gt   lt input type  file     id  myfile     onchange  javascript showSrc        size  30  gt       lt script type  text javascript  gt   function replaceAll txt  replace  with this        return txt replace new RegExp replace   g    with this      function showSrc         document getElementById  myframe   href   document getElementById  myfile   value      var theexa   document getElementById  myframe   href replace  file                var path   document getElementById  myframe   href replace  file                var correctPath   replaceAll path    20            alert correctPath       var filename   correctPath replace                          FileNameShow   text filename

User · Answer

function getFileName path  isExtension      var fullFileName  fileNameWithoutExtension        replace   to     while  path indexOf           -1        path   path replace                    fullFileName   path split      pop      return  isExtension    fullFileName   fullFileName slice  0  fullFileName lastIndexOf

User · Answer

The complete answer is    lt html gt       lt head gt           lt title gt Testing File Upload Inputs lt  title gt           lt script type  text javascript  gt           function replaceAll txt  replace  with this                return txt replace new RegExp replace   g   with this                      function showSrc                 document getElementById  myframe   href   document getElementById  myfile   value              var theexa   document getElementById  myframe   href replace  file                       var path   document getElementById  myframe   href replace  file                       var correctPath   replaceAll path   20                    alert correctPath                      lt  script gt       lt  head gt       lt body gt           lt form method  get  action       gt               lt input type  file                     id  myfile                     onChange  javascript showSrc                        size  30  gt               lt br gt               lt a href     id  myframe  gt  lt  a gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

The complete answer is    lt html gt       lt head gt           lt title gt Testing File Upload Inputs lt  title gt           lt script type  text javascript  gt           function replaceAll txt  replace  with this                return txt replace new RegExp replace   g   with this                      function showSrc                 document getElementById  myframe   href   document getElementById  myfile   value              var theexa   document getElementById  myframe   href replace  file                       var path   document getElementById  myframe   href replace  file                       var correctPath   replaceAll path   20                    alert correctPath                      lt  script gt       lt  head gt       lt body gt           lt form method  get  action       gt               lt input type  file                     id  myfile                     onChange  javascript showSrc                        size  30  gt               lt br gt               lt a href     id  myframe  gt  lt  a gt           lt  form gt       lt  body gt   lt  html gt

User · Answer

var filename   fullPath replace                    This will handle both   OR   in paths

User · Answer

var file name   file path substring file path lastIndexOf

User · Answer

function getFileName path  isExtension      var fullFileName  fileNameWithoutExtension        replace   to     while  path indexOf           -1        path   path replace                    fullFileName   path split      pop      return  isExtension    fullFileName   fullFileName slice  0  fullFileName lastIndexOf

User · Answer

What platform does the path come from  Windows paths are different from POSIX paths are different from Mac OS 9 paths are different from RISC OS paths are different     If it s a web app where the filename can come from different platforms there is no one solution  However a reasonable stab is to use both      Windows  and      Linux Unix Mac and also an alternative on Windows  as path separators  Here s a non-RegExp version for extra fun   var leafname  pathname split       pop   split      pop

User · Answer

Another one  var filename   fullPath split           pop      Here split have a regular expression with a character class The two characters have to be escaped with      Or use array to split   var filename   fullPath split             pop      It would be the way to dynamically push more separators into an array  if needed  If fullPath is explicitly set by a string in your code it need to escape the backslash  Like  C   Documents and Settings  img  recycled log jpg

User · Answer

Just for the sake of performance  I tested all the answers given here   var substringTest   function  str        return str substring str lastIndexOf      1      var replaceTest   function  str        return str replace                          var execTest   function  str        return             exec str  1      var splitTest   function  str        return str split       pop   split      pop       substringTest took   0 09508600000000023ms replaceTest   took   0 049203000000000004ms execTest      took   0 04859899999999939ms splitTest     took   0 02505500000000005ms   And the winner is the Split and Pop style answer  Thanks to bobince

User · Answer

Not more concise than nickf s answer  but this one directly  extracts  the answer instead of replacing unwanted parts with an empty string   var filename               exec fullPath  1

User · Answer

What platform does the path come from  Windows paths are different from POSIX paths are different from Mac OS 9 paths are different from RISC OS paths are different     If it s a web app where the filename can come from different platforms there is no one solution  However a reasonable stab is to use both      Windows  and      Linux Unix Mac and also an alternative on Windows  as path separators  Here s a non-RegExp version for extra fun   var leafname  pathname split       pop   split      pop

User · Answer

This solution is much simpler and generic  for both  file name  and  path    const str    C   Documents and Settings  img  recycled log jpg       regex to split path to two groups              for path and        for file name const regexPath                           execute the match on the string str const match   regexPath exec str   if  match     null           we ignore the match 0  because it s the match for the hole path string     const filePath   match 1       const fileName   match 2

User · Answer

This solution is much simpler and generic  for both  file name  and  path    const str    C   Documents and Settings  img  recycled log jpg       regex to split path to two groups              for path and        for file name const regexPath                           execute the match on the string str const match   regexPath exec str   if  match     null           we ignore the match 0  because it s the match for the hole path string     const filePath   match 1       const fileName   match 2

User · Answer

var filename   fullPath replace                    This will handle both   OR   in paths

User · Answer

Little function to include in your project to determine the filename from a full path for Windows as well as GNU Linux  amp  UNIX absolute paths           param  String  path Absolute path     return  String  File name     todo argument type checking during runtime     see https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Array includes     see https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Array slice     see https   developer mozilla org en-US docs Web JavaScript Reference Global Objects String lastIndexOf     example basename   home johndoe github my-package webpack config js       webpack config js      example basename  C   Users  johndoe  github  my-package  webpack config js       webpack config js      function basename path      let separator          const windowsSeparator           if  path includes windowsSeparator         separator   windowsSeparator        return path slice path lastIndexOf separator    1

User · Answer

A question asking  get file name without extension  refer to here but no solution for that  Here is the solution modified from Bobbie s solution   var name without ext    file name split       pop   split      pop   split       0

[javascript] How to get the file name from a full path using JavaScript?

Examples related to javascript