//Global Variable
var imgBlob;
var imgMimeType  

// Create a hidden file input dynamically
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'image/*';
fileInput.style.display = 'none';
document.body.appendChild(fileInput);


function uploadButtonHandler() {
    fileInput.click();
};

fileInput.addEventListener('change', () => {
    const imageDiv = document.querySelector('.popup .image');
    const file = fileInput.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
        imageDiv.innerHTML = ''; // clear previous content
        const img = document.createElement('img');
        img.src = e.target.result;
        img.alt = 'Uploaded Image';
        img.style.width = '100%';
        img.style.height = '100%';
        img.style.objectFit = 'cover';
        img.style.borderRadius = '10px';
        imageDiv.appendChild(img);
        // Use the original file as the blob and store its MIME type
        imgBlob = file;
        imgMimeType = file.type;
    };
    reader.readAsDataURL(file);
});