CODEWITHSUNDEEP
javascriptjqueryhtml
Hian Zing
Hian Zing

Reputation: 15

Javascript get file name is not working

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>

Upvotes: 0

Views: 1626

Answers (2)

Barmar
Barmar

Reputation: 782489

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>

Upvotes: 2

Alan Friedman
Alan Friedman

Reputation: 1610

You need to provide e to your event callback function

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

Upvotes: 0

Related Questions