Javascript get file name is not working

Question

Firstly i'll need to apologize as I'm very new to coding and this might be very easy to be solved

I need to get the name of the file and display it within the blue box. My js script's last part does not work:

var filename = e.target.value.split('\\').pop();    
$("#label_span").text(filename);

The message below was displayed when I tried it using the codesnippet

{ "message": "Uncaught ReferenceError: e is not defined", "filename": "https://stacksnippets.net/js", "lineno": 109, "colno": 19 }

Thanks in advance!

$(document).ready(function() {
  $("#file").on("change", function() {
    var files = $(this)[0].files;

    if (files.length >= 2) {
      $("#label_span").text(files.length + " files ready to upload");
    } else {
      var filename = e.target.value.split('\\').pop();
      $("#label_span").text(filename);
    }
  });
});

body {
  font-family: 'Varela Round', sans-serif;
  font-family: 16px;
}

h1 {
  color: #3c4954;
  text-align: center;
  margin-top: 100px;
  font-size: 36px;
}

p {
  color: #a4b0b9;
  line-height: 200%;
}

* {
  box-sizing: border-box;
}

footer {
  position: absolute;
  width: 100%;
  bottom: 20px;
}

.form-div {
  margin-top: 100px;
}

.input-label {
  background: #009688;
  color: #fff;
  padding: 30px;
  cursor: pointer;
}

.input-label:hover {
  background: #26a69a;
  cursor: white;
  cursor: pointer;
  padding: 30px;
  transition: .2s;
}

.fa {
  margin-right: 10px;
}

#file {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>
<head>
  <title>Custom Input</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="Test_Impor.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body align="center">
  <header>
    <h1>Custom Input</h1>
  </header>
  <div class="form-div">
    <form>
      <label for="file" class="input-label">
					<i class = "fa fa-upload"></i>
					<span id = "label_span">Select files to upload</span>
				</label>
      <input id="file" type="file" multiple="true" />
    </form>
  </div>
  <script src="Test_Import.js"></script>
</body>
</html>

Barmar · Accepted Answer · 2018-07-06 15:50:27Z

2

Each element of the files array is an object with a name property. So just access the first element of the array and get its name.

You don't need to use split(), as it just contains the name, not the full path.

And instead of $(this)[0] you can just use this.

$(document).ready(function() {

  $("#file").on("change", function() {

    var files = this.files;

    if (files.length >= 2) {
      $("#label_span").text(files.length + " files ready to upload");
    } else if (files.length == 1) {
      var filename = files[0].name;
      $("#label_span").text(filename);
    } else {
      $("#label_span").text("Select files to upload");
    }
  });
});

body {
  font-family: 'Varela Round', sans-serif;
  font-family: 16px;
}

h1 {
  color: #3c4954;
  text-align: center;
  margin-top: 100px;
  font-size: 36px;
}

p {
  color: #a4b0b9;
  line-height: 200%;
}

* {
  box-sizing: border-box;
}

footer {
  position: absolute;
  width: 100%;
  bottom: 20px;
}

.form-div {
  margin-top: 100px;
}

.input-label {
  background: #009688;
  color: #fff;
  padding: 30px;
  cursor: pointer;
}

.input-label:hover {
  background: #26a69a;
  cursor: white;
  cursor: pointer;
  padding: 30px;
  transition: .2s;
}

.fa {
  margin-right: 10px;
}

#file {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<html>

<head>
  <title>Custom Input</title>
  <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="Test_Impor.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>

<body align="center">

  <header>
    <h1>Custom Input</h1>
  </header>

  <div class="form-div">
    <form>
      <label for="file" class="input-label">
					<i class = "fa fa-upload"></i>
					<span id = "label_span">Select files to upload</span>
				</label>
      <input id="file" type="file" multiple="true" />

    </form>
  </div>




  <script src="Test_Import.js"></script>
</body>

</html>

edited Jul 6, 2018 at 15:50

answered Jul 5, 2018 at 22:24

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Hian Zing Over a year ago

Hopefully Mr Barmar you don't mind another question, what should I do when I want the span text to return to its default value (in this case: Logo + "select files to upload") when I clicked cancel upon choosing file to be opened. I have a feeling " $("#label_span").text(""); " <- this line is suppose to do something when there is no file

Barmar Over a year ago

Yeah, change that empty string to the message you want. I've updated the answer.

Hian Zing Over a year ago

Weird enough though it works on codesnippet. However, when I launched it from localhost:8080/xxxx, the last string is not displayed when cancel is clicked (using usbwebserver and launched it as a .php file).

Barmar Over a year ago

I'm not sure why Javascript would work differently depending on where the file was loaded from. Are there any errors in the console?

Hian Zing Over a year ago

Nope, there werent any problems, the string inside span was cleared each time i click cancel. The code works on jsfiddle too. I also tried to give it conditions but nope, nothing worked

|

Alan Friedman · Accepted Answer · 2018-07-05 22:19:10Z

0

You need to provide e to your event callback function

$("#file").on("change", function(e) {...}

answered Jul 5, 2018 at 22:19

Alan Friedman

1,61010 silver badges7 bronze badges

Collectives™ on Stack Overflow

Javascript get file name is not working

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related