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

BobMaster

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>
NICO

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);
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Why do I get a compilation error when I try to have two methods with the same name and parameter type?

why do i get exception error when i try output array

Why do I get an error for "__CrtGetFileInformationByHandleEx " when I try to compile

Why do I get an "invalid values" error when I try to access the network settings on Eclipse Mars?

Why I get error when I try to create stored procedure?

Why do I see `503 Backend Error` when I try to get a Cloud Storage service account?

Why do I get an error when I try to add a dependent task to one created by the C plugin?

I get a syntax error when I try to use array map function in Google Scripts. Why?

Why I get an error when I try to deploy a react app to GitHub Pages?

Why I get error when try append element to document?

Why Do I get an error when I try to get tkinter slider value?

React App: Why I get an error when I try to run npm start script?

I get an error when I try to use ROW_NUMBER(), why?

I get an error when I try to change my upload image function name Django

Why I get Error "No such file or directory", when I try to include a header file?

why i get "no attirubute error" when i try to call python function from c++

Why I get Unpermitted parameters error when I try to save with HABTM check_box_tag?

Why do I get error when I try to alert the length of the passed array to the function?

Error when I try to upload a Chrome extension

I get this error when I try to install

Why do I get 'undefined' error when I try to read session atrribute from Controller

Why do I get a NoClassDefFound error when I try to save my test plan?

Why I get error when I try to install pyaudio?

I get a "Specified method is not supported" error when i try to use ExcelDataReader to upload file to database

Why do i get this error when I try installing autopep8 using pip?

Why I get error when I try to declare local variable?

Why do I get an error when I try to see my Text using useState?

Why do I get error when try to convert Carbon to DateTime?

Why I get error when try build image in docker?

TOP Ranking

HotTag

Archive