Displaying picture before submitting the form JavaScript

694 views Asked by At

I'd like to prepare a profile picture upload form. What's necessary here? Ability to see how is the image going to fit, before submitting it which is the moment I'm stuck at unfortunately. I attached here the form element from my JSP and JS file supposed to handle retrieving the form file via formData. For some reason tho JS isn't willing to do anything with the backgroundImage property not throwing any kind of error either. I'd really love some help with this task. Using plain languages only, as I'm an extremist ;).

HTML:

 <div class="profilePicture">
                <form class="choosePhotoLabel" enctype="multipart/form-data" action="savePictureServlet" method="post">
                    <input class="choosePhoto" type="file" name="picture">
                    <input class="photoOk" type="submit" value="this is the picture!">
                </form>
            </div>

JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    let formInHTML = document.getElementsByClassName("choosePhotoLabel").item(0);
    let formInputInHTML = document.getElementsByClassName("choosePhoto").item(0);
    let imagePlace = document.getElementsByClassName("profilePicture").item(0);

    let pictureReader = new FileReader();

    function mlemToFile(mlem) {
        mlem.lastModifiedDate = new Date();
        mlem.name = "nonMlemPicture";
        return mlem;
    }

    formInputInHTML.addEventListener("change", function () {
        let formData = new FormData(formInHTML);
        let formPicture = formData.get("picture");

        if (formPicture != null) {
            let nonMlemPicture = mlemToFile(formPicture);
            pictureReader.readAsDataURL(nonMlemPicture);

            if (pictureReader.result != null) {
                let picture64 = pictureReader.result.replace(/^data:.+;base64,/, '');
                imagePlace.style.backgroundImage = picture64;
            }
        }
    });
});

2

There are 2 answers

2
Endless On BEST ANSWER

The FileReader is async, which means you have to wait for the result to have been read.

you are missing:

pictureReader.onload = function () {
  // code to set the image source
}

also you shouldn't remove the prefix (data:.+;base64) in the beginning - that part is important

But i don't think you should be using the filereader to display base64 images. It's better & faster to use object url referring to the blob/file in it's binary form.

also, instead of using formdata, use formInputInHTML.files[0]

formInputInHTML.addEventListener("change", function () {
    const formPicture = formInputInHTML.files[0];
    const url = URL.createObjectURL(formPicture);
    imagePlace.style.backgroundImage = `url(${url})`;
});
0
GMKHussain On

short solution

let uploadInput = document.getElementById("uploadInput");

uploadInput.onchange = function () {
  let image = new FileReader();
  
  image.onload = function (e) {
    document.getElementById("imagePreview").src = e.target.result;
    };
  image.readAsDataURL(this.files[0]);
};
 
<input type="file" id="uploadInput" />

<img id="imagePreview" style="width:300px;" class="normal" />