Handling the selection of a file from a file input

Question

I'm trying to have the filename of a chosen file appear in the body of a file picker. This is an Asp.Net Core view. I have the following file input:

<div class="form-group file-upload-wrapper">
    <input id="the-file" type="file" name="name" onchange="handleFile()" />    
    <label class="custom-file-label" for="the-file">Choose a file</label>                        
</div>

I want the filename to appear in place of the Choose a file text.

My JS looks like this:

@section Scripts {
<script language="javascript"> 

    function handleFile(file) {
        console.log(file);         
    }

As it currently stands, I'm getting an error:

ReferenceError: handleFile is not defined

My assumption is that handleFile needs to look something like this:

document.getElementById("the-file").title = file.files[0].name;

Am I on the right lines with this, and why am I getting the above error?

JSFiddle here

Is it possible for you to create a fiddle? jsfiddle – ii iml0sto1 Dec 23 '19 at 10:55 — ii iml0sto1, Dec 23 '19 at 10:55

Surajit Basak · Answer 1 · 2019-12-23T13:00:43.610

You can use event handler for that. Remove onchange attribute form that element and use below:

document.getElementById('the-file')
  .addEventListener('change', (e) => {
    handleFile(e)
  });

function handleFile(file) {
  console.log(file.target.value);
}

Here is the snippet:

document.getElementById('the-file')
  .addEventListener('change', (e) => {
    handleFile(e)
  });

function handleFile(file) {
  console.log(file.target.value);
  log(file.target.value);
}

function log(msg) {
 document.getElementById('result').innerText = msg;
}

<div class="form-group file-upload-wrapper">
  <input id="the-file" type="file" name="name" />
  <label class="custom-file-label" for="the-file">Choose a file</label>
</div>

<pre id="result"></pre>

score 0 · Answer 2 · answered Dec 24 '19 at 10:29

From the documentation , you need to modify the code like below:

<div class="custom-file">
    <input type="file" class="custom-file-input" id="the-file" name="name"/>
    <label class="custom-file-label" for="the-file">Choose a file</label>
</div>

@section Scripts
{
  <script>
     document.getElementById('the-file').addEventListener('change', function (e) {
        var fileName = document.getElementById("the-file").files[0].name;
        var nextSibling = e.target.nextElementSibling
         nextSibling.innerText = fileName
     }); 
  </script>

}

You could refer to Bootstrap 4 File Input for more details.

score 0 · Answer 3 · answered Dec 24 '19 at 10:36

why am I getting the above error?

The code within the fiddle is different from the OP. I'll take the code on Fiddle as an example.

First of all, note that you added a bootstrp.min.js reference, however, you didn't add a jquery for it. Because bootstrap.min.js has a dependency on jquery, it throws before the handleFile() function is defined.

That's why we could see an error of util.js:56 Uncaught TypeError: Cannot read property 'fn' of undefined at util.js:56 in the console. To fix that issue, either add a jquery.min.js before the bootstrap.min.js:

Or change the loading behavior of your js like:
And then you mix up the js statement with a function reference by :
```
<input id="the-file" type="file" name="name" onchange="this.handleFile" /> 
```
Note you should put a js statement instead of a single function reference within onchange="...". That being said, you could fix it by:
```
<input id="the-file" type="file" name="name" onchange="handleFile(event.target.files)" /> 
```
Your handleFile() uses a this that points to the window at runtime. As a result, it throws when invoked. Since we have passed the files as the arguments, change the function as below:
```
 function handleFile(files) {       
    console.log(files);         
}       
```

score -1 · Answer 4 · answered Dec 23 '19 at 11:16

<div class="form-group file-upload-wrapper">
  <script>
    const handleFile = file => {
      console.log(file);         
     } 
    </script>
    
    <input id="the-file" type="file" name="name" value ="file" onchange="handleFile(value)" />    
    <label class="custom-file-label" for="the-file">Choose a file</label>                        
</div>

Handling the selection of a file from a file input

4 Answers4

Here is the snippet: