JavaScript - How to Extract Filename from a File Input Control

Javascript - How to extract filename from a file input control

Assuming your <input type="file" > has an id of upload this should hopefully do the trick:

var fullPath = document.getElementById('upload').value;
if (fullPath) {
    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
        filename = filename.substring(1);
    }
    alert(filename);
}

How do I get the file name when I select a file from input type = file?

Try this

function myfns() {
  input = document.getElementById('img');   file = input.files[0];
  console.log(file.type)
  console.log(file.name)
  console.log(file.size)
 
}

<input id="img" onchange="myfns()" type="file" name="imageUpload"/>

How to get file name when user select a file via input type=file /?

You can get the file name, but you cannot get the full client file-system path.

Try to access to the value attribute of your file input on the change event.

Most browsers will give you only the file name, but there are exceptions like IE8 which will give you a fake path like: "C:\fakepath\myfile.ext" and older versions (IE <= 6) which actually will give you the full client file-system path (due its lack of security).

document.getElementById('fileInput').onchange = function () {
  alert('Selected file: ' + this.value);
};

I Want to display input file name not full path

A escaped backslash make a backslash in a string '\\'

So you will have to use .split("\\") to get the file name.

Try this:

function change() {  let fnVal = document.getElementById('fn').value.split("\\");;  document.getElementById('file-name').innerHTML = fnVal[fnVal.length - 1];}

  <div><input type="file" name="" id="fn" onchange="change();"><span id="file-name">File Name</span></div>

javascript - get the filename and extension from input type=file

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'>

How i get the file name when i upload anyfile from my fileupload control

To determine the name of the uploaded file in your controller.

In your ActionResult function:

    if (Request.Files.Count > 0)
    {
        var data = Request.Files[0].InputStream;
        var filename = Request.Files[0].FileName;
    }

You can then pass the filename back to the view.

Please see this question for how to determine the filename using javascript:

Javascript - How to extract filename from a file input control

[The question is not clear as to whether you are trying to determine the filename from the post on the server side, or if you are trying to determine the filename within the page]

Get the filename of a fileupload in a document through JavaScript

Try the value property, like this:

var fu1 = document.getElementById("FileUpload1");
alert("You selected " + fu1.value);

NOTE: It looks like FileUpload1 is an ASP.Net server-side FileUpload control.

If so, you should get its ID using the ClientID property, like this:

var fu1 = document.getElementById("<%= FileUpload1.ClientID %>");

Automatically get file name in input after selecting file

Adding this should do what you want, It would be easier in JQuery but as you specified javascript I kept it all pure JS.

<script>
    file.onchange = function(e) { 
        //Get the file path
        var fileName = document.getElementById("file").value; 
        //Get the filename
        var fileName2 = fileName.replace(/^.*[\\\/]/, '');
        //Remove the extension and set the input text
        document.getElementById("name").value = fileName2.replace(/\.[^/.]+$/, ""); 
    };
</script>

---

Related Topics