-1

I am trying to print the name of the uploaded image but it currently just previews the image but not actually printing the name of the file on the html. How can I make it print the name of the file from javascript fileReader function?

Here is my code in the main.js file

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
            $('#imagePreview').hide();
            $('#imagePreview').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

Here is the corresponding html code

<div class="image-section" style="display:none;">
    <div class="img-preview">
        <div id="imagePreview">
        </div>
    </div>
upendra
  • 2,141
  • 9
  • 39
  • 64
  • 1
    might be a duplicate of https://stackoverflow.com/questions/24245105/how-to-get-the-filename-from-the-javascript-filereader/27927981 – SuperStar518 Jun 24 '19 at 05:49

2 Answers2

0

In the onload function you can get the file name.

reader.onload = function(e) {
    console.log(e.target.fileName);
};
Jaydeep
  • 1,686
  • 1
  • 16
  • 29
0

You can access it using name property. So as per your code its:

input.files[0].name
Adams Hales
  • 119
  • 9