How to display file name with javascript after upload

Question

I want to use a different button to upload files to a form. Therefore, i hide the standard upload file button. However, i do want to display the filename when a user uploads a file.

Using wordpress contact form 7, i already tried putting a JS function on the label, but that doesnt work.

<label for="fileInput" class="custom-file-upload" onclick="displayfilename()">Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

<script>
function displayfilename() 
$('#fileInput').change(function(){
var filename = $(this).val().split('\\').pop();
});
</script>

The filename should be displayed next to the label.

You are assigning an onchange handler inside an onclick handler. This will keep assigning more and more onchange handlers to the element. — user5734311
– user5734311, Commented Apr 17, 2019 at 11:38

Mamun · Accepted Answer · 2019-04-17 11:58:46Z

2

You can use Event.target along with triggering the change event.

Please Note: You also have syntax error in your code (missing the {.......} part of the function displayfilename).

$('#fileInput').change(function(e){
  var filename = e.target.files[0].name;
  console.log(filename);
});
function displayfilename() {
  $('#fileInput').trigger('change');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fileInput" class="custom-file-upload" >Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

OR: You can also use this object:

$('#fileInput').change(function(){
  var filename = $(this)[0].files[0].name;
  console.log(filename);
});
function displayfilename() {
  $('#fileInput').trigger('change');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fileInput" class="custom-file-upload" >Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

edited Apr 17, 2019 at 11:58

answered Apr 17, 2019 at 11:38

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

1 Comment

Webdever Over a year ago

Ok when i apply this i run into another problem. When i include the jquery library i get the notice type error: e.indexOf is not a function with a reference to a theme file js/general.js?ver=1.0.41

AdelRabea · Accepted Answer · 2021-02-15 11:01:42Z

2

$('#fileInput').change(function(e){
  var filename = e.target.files[0].name;
  console.log(filename);
});
function displayfilename() {
  $('#fileInput').trigger('change');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fileInput" class="custom-file-upload" >Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

answered Feb 15, 2021 at 11:01

AdelRabea

212 bronze badges

Comments

Maxim Palenov · Accepted Answer · 2019-04-17 11:37:29Z

1

You can access the file name in this way:

<label for="fileInput" class="custom-file-upload" onclick="displayfilename()">Choose file</label>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

<script>
function displayfilename() 
$('#fileInput').change(function(e) {
  var fileName = e.target.files[0].name;
  alert('The file "' + fileName +  '" has been selected.');
});
</script>

answered Apr 17, 2019 at 11:37

Maxim Palenov

7301 gold badge8 silver badges17 bronze badges

2 Comments

Webdever Over a year ago

Almost there. However, i dont want an alert, just output of filename as text after label....

Webdever Over a year ago

Sorry just solved it. Right solution is to change "alert" to document.getElementById("fileuploadspan").innerHTML. Thank you!

user5734311 · Accepted Answer · 2019-04-17 11:44:49Z

1

Here's a custom <button> and a custom filename <span>:

$('.choosefile').click(function () {
  $('#fileInput').click();
});
$('#fileInput').change(function(e) {
  var filename = this.files[0].name;
  $('.fileuploadspan').text(filename);
});

input[type=file] {
  display: none
}

.choosefile, .fileuploadspan {
  font-family: "Comic Sans MS"
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="fileInput" class="custom-file-upload">Choose file</label>
<button class="choosefile">Browse...</button>
<input id="fileInput" name="fileInput" type="file" />
<span class="fileuploadspan">No file selected</span>

answered Apr 17, 2019 at 11:44

user5734311

Comments

Said bouhmouch · Accepted Answer · 2019-04-17 11:51:21Z

    <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   </head>
   <body>

    <label for="fileInput" class="custom-file-upload">Choose file
            <input id="fileInput" name="fileInput" type="file"  onchange="uploadPreview(this)"  style="display:none"/>
         </label><br>
         <span class="fileuploadspan">No file selected</span>
   </body>
   </html>

js

uploadPreview = function (fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                continue;
            }
            var reader = new FileReader();
            reader.onload = function (e) {

                var filename = file.name;
                filename = filename.replace('.jpg', '');
                filename = filename.replace('.jpeg', '');
                filename = filename.replace('.png', '');
                filename = filename.replace('.gif', '');
                filename = filename.replace('.bmp', '');
                $('.fileuploadspan').text(filename);

                return;
            };
            reader.readAsDataURL(file);
        }
    }

Collectives™ on Stack Overflow

How to display file name with javascript after upload

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related