Why I get an error when I try to upload a picture

user_16486946 0
Viewed 228

I have error when i upload photo, name of photo shows up but not the picture. I dont know why the error occurs the script is at the end of body.

Error message in browser

new:181 Uncaught TypeError: Cannot read property '0' of undefined
    at HTMLInputElement.<anonymous> (new:181)
    at HTMLInputElement.dispatch (jquery.min.js:2)
    at HTMLInputElement.v.handle (jquery.min.js:2)

HTML code

        <div class="form-group row">
            <label class="col-sm-4 col-form-label">Photos:</label>
            <div class="col-sm-8">
                <input type="file" id="fileImage" accept="image/png, image/jpeg"
                class="mb-2"/>
                <img id="thumbnail" alt="Photos preview" th:src="@{/images/default-user.png}"
                class="img-fluid"/>
            </div>
        </div>

JQuery code

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#buttonCancel").on("click", function () {
            window.location = "[[@{/users}]]";
        });

        $("#fileImage").change(function () {
            fileSize = this.file[0].size;
            alert("File size: " + fileSize);

            // max 1MB
            if (fileSize > 1048576) {
                this.setCustomValidity("You must choose an image less than 1MB");
                this.reportValidity();
            } else {
                this.setCustomValidity("");
                showImageThumbnail(this);
            }
        });
    });

    function showImageThumbnail(fileInput) {
        var file = fileInput.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#thumbnail").attr("src", e.target.result);
        };

        reader.readAsDataURL(file);
    }
</script>
html jquery javascript
1 Answers

Two things here: You forget to declare the fileSize variable. And it's

this.files[0]

So here's how you get your file size

let fileSize = this.files[0].size;

And a working example

$(document).ready(function () {
  console.log('test')
    $("#buttonCancel").on("click", function () {
        window.location = "[[@{/users}]]";
    });

    $("#fileImage").change(function () {
        let fileSize = this.files[0].size;
        alert("File size: " + fileSize);

        // max 1MB
        if (fileSize > 1048576) {
            this.setCustomValidity("You must choose an image less than 1MB");
            this.reportValidity();
        } else {
            this.setCustomValidity("");
            showImageThumbnail(this);
        }
    });
});

function showImageThumbnail(fileInput) {
    var file = fileInput.files[0];
    var reader = new FileReader();
    reader.onload = function (e) {
        $("#thumbnail").attr("src", e.target.result);
    };

    reader.readAsDataURL(file);
}
user_23268220
Related