How To Display File Name With Javascript After Upload

December 27, 2023 Post a Comment

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

Solution 1:

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);
});
functiondisplayfilename() {
  $('#fileInput').trigger('change');
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><labelfor="fileInput"class="custom-file-upload" >Choose file</label><inputid="fileInput"name="fileInput"type="file" /><spanclass="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);
});
functiondisplayfilename() {
  $('#fileInput').trigger('change');
}

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

Solution 2:

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

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

Solution 3:

You can access the file name in this way:

<labelfor="fileInput"class="custom-file-upload"onclick="displayfilename()">Choose file</label><inputid="fileInput"name="fileInput"type="file" /><spanclass="fileuploadspan">No file selected</span><script>functiondisplayfilename() 
$('#fileInput').change(function(e) {
  var fileName = e.target.files[0].name;
  alert('The file "' + fileName +  '" has been selected.');
});
</script>

Solution 4:

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"
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><labelfor="fileInput"class="custom-file-upload">Choose file</label><buttonclass="choosefile">Browse...</button><inputid="fileInput"name="fileInput"type="file" /><spanclass="fileuploadspan">No file selected</span>

Solution 5:

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body><labelfor="fileInput"class="custom-file-upload">Choose file
            <inputid="fileInput"name="fileInput"type="file"onchange="uploadPreview(this)"style="display:none"/></label><br><spanclass="fileuploadspan">No file selected</span></body></html>

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 = newFileReader();
            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);
        }
    }

JavaScript Apprenticeships