How to Get File Name When User Select a File via <Input Type="File" />

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);
};

Get filename from input [type='file'] using jQuery

You have to do this on the change event of the input type file this way:

$('#select_file').click(function() {
    $('#image_file').show();
    $('.btn').prop('disabled', false);
    $('#image_file').change(function() {
        var filename = $('#image_file').val();
        $('#select_file').html(filename);
    });
});​

How to display file name for custom styled input file using jquery?

You have to bind and trigger the change event on the [type=file] element and read the files name as:

$('#file-upload').change(function() {  var i = $(this).prev('label').clone();  var file = $('#file-upload')[0].files[0].name;  $(this).prev('label').text(file);});

.custom-file-upload {  border: 1px solid #ccc;  display: inline-block;  padding: 6px 12px;  cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form>  <label for="file-upload" class="custom-file-upload">    <i class="fa fa-cloud-upload"></i> Upload Image  </label>  <input id="file-upload" name='upload_cont_img' type="file" style="display:none;"></form>

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 to get the filename from input type=file html element using JavaScript or JQuery?

This should work:

$("input[name='attachment[]']").each(function() {
    var fileName = $(this).val().split('/').pop().split('\\').pop();
    console.log(fileName);
});

You can't get the full path of the file, because it depends on the browser you use. The only common cross-browser value for an input file is the name of the file.

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>

how get get file name in file chooser in react?

Good documentation and example taken from here, explaining what you are trying to do.
https://reactjs.org/docs/uncontrolled-components.html#the-file-input-tag

Codepen: https://codepen.io/anon/pen/LaXXJj

React.JS contains a specific File API to use.

The following example shows how to create a ref to the DOM node to access file(s) in a submit handler:

HTML

<input type="file" />

React.JS

class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.fileInput = React.createRef();
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - ${
        this.fileInput.current.files[0].name
      }`
    );
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input type="file" ref={this.fileInput} />
        </label>
        <br />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />,
  document.getElementById('root')
);

Alert Filename

alert(`Selected file - ${this.fileInput.current.files[0].name}`);

Cited: React.JS Documentation | Examples

Angular 5 how to get file name from input with type = file

Try this below way

onFileSelected(event) {
 if(event.target.files.length > 0) 
  {
    console.log(event.target.files[0].name);
  }
}

Use jQuery to get the file input's selected filename without the path

var filename = $('input[type=file]').val().split('\\').pop();

or you could just do (because it's always C:\fakepath that is added for security reasons):

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')

---

Related Topics