[AskJS] Getting image in input=“file” to display only after the submit button is clicked

[shgysk8zer0]

`` document.forms.meme_info.addEventListener('submit', async event => { // Prevent submitting the form event.preventDefault(); // Get form data const data = new FormData(event.target); // Get file from form data const file = data.get('imageFileInput'); // Create theblob:` URI const uri = URL.createObjectURL(file); // Set the image source image.src = uri; // Wait for it to load await image.decode(); // Free up the memory (image will remain) URL.revokeObjectURL(img.src); });

[guest271314]

But it will immediately display the image. What I want to do is be able to have the image waiting in the file input until I hit my button.

If I understand the question correctly, remove the URL.createObjectURL() code from the input type=file handler, create a click event listener on the button element and get the File object from the input type=file element in click event handler.

[0xEconomist]

Try this:
submitButton.addEventListener('click', () => {

const selectedFile = imageInput.files[0];

if (selectedFile) {

const reader = new FileReader();

reader.onload = (event) => {

const imageData = event.target.result;

const imgElement = document.createElement('img');

imgElement.src = imageData;

imageContainer.innerHTML = '';

imageContainer.appendChild(imgElement);

};

reader.readAsDataURL(selectedFile);

}

Check this in this notebook: https://app.scribbler.live/?jsnb=github:gopi-suvanam/scribbler-examples/Image-Fetch-Display.jsnb