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;
}
}
});
});
The FileReader is async, which means you have to wait for the result to have been read.
you are missing:
also you shouldn't remove the prefix (
data:.+;base64
) in the beginning - that part is importantBut 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]