Displaying picture before submitting the form JavaScript

Question

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

score 0 · Answer 1 · answered Nov 29 '20 at 16:37

0

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" />

answered Nov 29 '20 at 16:37

GMK Hussain

1,053
8
7

Thank You for helping! – KotekBehemotek Nov 29 '20 at 17:58

score 0 · Accepted Answer · answered Nov 29 '20 at 16:37

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

Oh no, I didn't know comments doesn't support code snippets, sorry — KotekBehemotek, Nov 29 '20 at 17:24

Displaying picture before submitting the form JavaScript

2 Answers2