Javascript - Get The Filename And Extension From Input Type=file

I have a file upload input and when I click the browse button and select the file, I want the filename and extension to appear in two input text boxes (see code sample). It works

Solution 1:

This is bit old post...just for info

var files = event.target.files
   var filename = files[0].name
   var extension = files[0].type

In the type you will find the extension for eg: if it is jpeg image then,

extension = image/jpeg

or if pdf then,

extension = application/pdf

To obtain the exact value, perform extension.replace(/(.*)\//g, ''). you will get the value.

Solution 2:

Use lastIndexOf to get the last \ as an index and use substr to get the remaining string starting from the last index of \

functiongetFile(filePath) {
        return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];
    }

    functiongetoutput() {
        outputfile.value = getFile(inputfile.value);
        extension.value = inputfile.value.split('.')[1];
    }

<inputid='inputfile'type='file'name='inputfile'onChange='getoutput()'><br>
    Output Filename <inputid='outputfile'type='text'name='outputfile'><br>
    Extension <inputid='extension'type='text'name='extension'>

UPDATE

functiongetFileNameWithExt(event) {

  if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
    return;
  }

  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const fileName = name.substring(0, lastDot);
  const ext = name.substring(lastDot + 1);

  outputfile.value = fileName;
  extension.value = ext;
  
}

<inputid='inputfile'type='file'name='inputfile'onChange='getFileNameWithExt(event)'><br>
  Output Filename <inputid='outputfile'type='text'name='outputfile'><br>
  Extension <inputid='extension'type='text'name='extension'>

Solution 3:

var filePath = $("#inputFile").val(); 
var file_ext = filePath.substr(filePath.lastIndexOf('.')+1,filePath.length);
console.log("File Extension ->-> "+file_ext);

It will work if you have dots in filename.

Solution 4:

Here is a handy code.

Stringextension= fileName.substring(fileName.lastIndexOf('.')+1);
    Stringname= fileName.substring(0, fileName.lastIndexOf('.'));

Solution 5:

You could try this out:

var fullPath = inputfile.value.split('.')[0];
var filename = fullPath.replace(/^.*[\\\/]/, '');
outputfile.value=filename;`

This should remove everything except the filename.

I got it from How to get the file name from a full path using JavaScript?.