JS - Only allowing one file to be uploaded when using FileReader Object

Question

In my project, I have some JS code that allows a user to select an image for their profile picture, and then that image is displayed in the browser.

I only want the user to be able to select a single image for their profile pic, and this single image should be the only image displayed in the browser after the user selects it.

However currently a user can choose multiple images for their profile pic and these multiple pics are all displayed in the browser beside each other.

The code below uses a FileReader object to allow the image to be displayed in the browser when the user selects it from the input field.

Here is my JS code:

 // profilePic is the id of my file field

  // CORRECTION HERE
    var img = document.createElement("img");

    img.classList.add("fixedImage");
    $("#profilePic").change(function(e) {
        for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

            var file = e.originalEvent.srcElement.files[i];



            var reader = new FileReader();
            reader.onloadend = function() {
                 img.src = reader.result;
            }
            reader.readAsDataURL(file);
            $("#profilePic").after(img);
        }
    });

How do I make it so the user can only select one file, as currently when a user selects one image it is displayed in the browser, but when another image is selected from the same file input, it is also shown in the browser next to the first image selected. Anybody know how to fix the issue? Thanks.

UPDATED CODE :

This code does not work, and nothing at all changes. Please note that I do not believe #profilePic has a src attribute, as it is a file input, and not an image element.

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

        reader.onload = function(e){
            $("#profilePic").attr('src',e.target.result);
        }

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


$("#profilePic").change(function(e) {
    readURL(this);
    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var img = document.createElement("img");

        img.classList.add("fixedImage");

        var reader = new FileReader();
        reader.onloadend = function() {
             img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("#profilePic").after(img);
    }
});

UPDATE - HTML CODE:

     <form class="completeSignupForm" enctype="multipart/form-data" method="POST" action="/">

                <input type="file" name="profile_pic" id="profilePic" accept="image/*">
                <br>

                <input type="text" name="bio" placeholder="Add a bio:" id="bio" maxlength="140">
                <br>

            <label for="profilePic"><u></u>Click here to choose a profile photo</u></label>
            <button type="submit" class="btn btn-primary doneBtn">Done</button>
     </form>

Answer 1

Try this

HTML

<div id="preview"></div>
<img src="dummyavatar.png" id="img"/>

JS

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

        reader.onload = function(e){
            $("#preview").attr('src',e.target.result);
        }

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

$("#img").change(function(){
    readURL(this);
});

Using your code, I have corrected it here

  <script>
    var img = document.createElement("img");

    img.classList.add("fixedImage");
    $("#profilePic").change(function(e) {


            var file = e.originalEvent.srcElement.files[0];



            var reader = new FileReader();
            reader.onloadend = function() {
                 img.src = reader.result;
            }
            reader.readAsDataURL(file);
            $("#profilePic").after(img);

    });
</script>