Uncaught ReferenceError: readURL is not defined at HTMLInputElement.onchange

Question

I'm trying to change the src of an image element to the image uploaded in the file form, however, when I select an image, I get the error Uncaught ReferenceError: readURL is not defined at HTMLInputElement.onchange and the src of the image element doesn't change.

HTML

        <div class="new-avatar-container">
            <img class='new-avatar-picture' src='{{url("storage/uploads/profile_pictures/edited/".$user->image_file_name)}}'>
            <div class="upload-btn-wrapper">
                <button class="btn">Upload a new avatar</button>
                <input class='new-avatar' type="file" name="file" onchange="readURL()">
            </div>
        </div>

Javascript

function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('.profile-container-picture').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".new-avatar").change(function() {
        readURL(this);
    });

Answer 1

Try to add your function in :

$(document).ready(function(){
   readURL = function(input) {}
});

perhaps your function is not present when you try to call it