Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 correctly with the extension, but the filename also shows the path which gives me the fakepath warning.

I understand why, but what's a good way to do this and just get the filename into that box. I don't need the path.

function getoutput(){      outputfile.value=inputfile.value.split('.')[0];      extension.value=inputfile.value.split('.')[1];}
    <input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>      Output Filename <input id='outputfile' type='text' name='outputfile'><br>      Extension <input id='extension' type='text' name='extension'>
like image 901
CheeseFlavored Avatar asked Apr 30 '17 15:04

CheeseFlavored


People also ask

How do I get the file extension of an input type file?

The full filename is first obtained by selecting the file input and getting its value property. This returns the filename as a string. By the help of split() method, we will split the filename into 2 parts. The first part will be the filename and the second part will be the extension of the file.

How do you validate a file type in JavaScript?

Using JavaScript, you can easily check the selected file extension with allowed file extensions and can restrict the user to upload only the allowed file types. For this we will use fileValidation() function. We will create fileValidation() function that contains the complete file type validation code.


2 Answers

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.

like image 197
Dhatri Suresh Avatar answered Sep 24 '22 19:09

Dhatri Suresh


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

function getFile(filePath) {          return filePath.substr(filePath.lastIndexOf('\\') + 1).split('.')[0];      }        function getoutput() {          outputfile.value = getFile(inputfile.value);          extension.value = inputfile.value.split('.')[1];      }
<input id='inputfile' type='file' name='inputfile' onChange='getoutput()'><br>      Output Filename <input id='outputfile' type='text' name='outputfile'><br>      Extension <input id='extension' type='text' name='extension'>

UPDATE

function getFileNameWithExt(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;      }
<input id='inputfile' type='file' name='inputfile' onChange='getFileNameWithExt(event)'><br>    Output Filename <input id='outputfile' type='text' name='outputfile'><br>    Extension <input id='extension' type='text' name='extension'>
like image 40
Junius L. Avatar answered Sep 21 '22 19:09

Junius L.