dealhub/resources/js/image-input.js

const previewImage = document.getElementById('preview-image');

function upload(size) {
    const imageInput = document.getElementById("image-input");
    const closeModalBtn = document.getElementById("close-modal");
    const cancelBtn = document.getElementById("cancel-modal");
    const modal = document.getElementById("image-modal");
    let imageUrl = '';

    const image = imageInput.files[0];

    if (!image || !image.type.includes("image")) {
        alert("Please upload a valid image");
        return;
    }
    if (image.size > size * 1000000) {
        alert(`Max size of image is ${size} MB`);
        return;
    }

    // Creating a FileReader class to convert image blob to base64
    const fileReader = new FileReader();
    fileReader.readAsDataURL(image);

    fileReader.onload = (e) => {
        const imagePlaceholder = document.getElementById("image-placeholder");
        imagePlaceholder.src = imageUrl = e.target.result;
        modal.showModal();
    }

    closeModalBtn.addEventListener('click', () => {
        // this closes then modal and sets the preview image
        previewImage.src = imageUrl;
        modal.close();
    })

    cancelBtn.addEventListener('click', () => {
        // clears the file from image input field and closes the modal
        imageInput.value = "";
        modal.close();
    })
}

document.upload = upload;