Image Drag And Drop File Uploader

function processImage(originalImg, width = "100%", minHeight = "300px", activeColor = "#00acc1", dndText = "Drag & Drop Image Here") {
    // Create the main container for the drag and drop area
    const container = document.createElement('div');
    container.style.width = width;
    container.style.maxWidth = "600px";
    container.style.minHeight = minHeight;
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.justifyContent = 'center';
    container.style.border = '2px dashed #a0a0a0';
    container.style.borderRadius = '12px';
    container.style.backgroundColor = '#f8f9fa';
    container.style.cursor = 'pointer';
    container.style.color = '#555';
    container.style.fontFamily = 'system-ui, -apple-system, sans-serif';
    container.style.overflow = 'hidden';
    container.style.position = 'relative';
    container.style.transition = 'all 0.3s ease';

    // Create the overlay text element
    const textDiv = document.createElement('div');
    textDiv.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-bottom: 10px; color: #a0a0a0;">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="17 8 12 3 7 8"></polyline>
            <line x1="12" y1="3" x2="12" y2="15"></line>
        </svg>
        <br>
        <b style="font-size: 18px; color: #333;">${dndText}</b><br>
        <span style="font-size: 14px; color: #777;">or click to browse files</span>
    `;
    textDiv.style.pointerEvents = 'none'; // so clicks pass through to container
    textDiv.style.zIndex = '2';
    textDiv.style.textAlign = 'center';
    textDiv.style.background = 'rgba(248, 249, 250, 0.85)';
    textDiv.style.padding = '15px 25px';
    textDiv.style.borderRadius = '8px';
    textDiv.style.boxShadow = '0 4px 6px rgba(0,0,0,0.05)';

    // Image preview element
    const imgPreview = document.createElement('img');
    imgPreview.style.maxWidth = '100%';
    imgPreview.style.maxHeight = '100%';
    imgPreview.style.objectFit = 'contain';
    imgPreview.style.position = 'absolute';
    imgPreview.style.top = '0';
    imgPreview.style.left = '0';
    imgPreview.style.width = '100%';
    imgPreview.style.height = '100%';
    imgPreview.style.zIndex = '1';
    imgPreview.style.opacity = '0';
    imgPreview.style.transition = 'opacity 0.3s ease';

    // Initialize with original image if available
    if (originalImg && originalImg.src) {
        imgPreview.src = originalImg.src;
        imgPreview.style.opacity = '1';
        textDiv.style.background = 'rgba(255, 255, 255, 0.7)';
    }

    // Hidden file input element
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = 'image/*';
    fileInput.style.display = 'none';

    // Construct the DOM structure
    container.appendChild(imgPreview);
    container.appendChild(textDiv);
    container.appendChild(fileInput);

    // Event Listeners for drag, drop and click
    container.addEventListener('click', () => {
        fileInput.click();
    });

    container.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.stopPropagation();
        container.style.backgroundColor = '#e0f7fa';
        container.style.borderColor = activeColor;
        container.style.boxShadow = `0 0 10px ${activeColor}40`;
    });

    container.addEventListener('dragleave', (e) => {
        e.preventDefault();
        e.stopPropagation();
        container.style.backgroundColor = '#f8f9fa';
        container.style.borderColor = '#a0a0a0';
        container.style.boxShadow = 'none';
    });

    container.addEventListener('drop', (e) => {
        e.preventDefault();
        e.stopPropagation();
        container.style.backgroundColor = '#f8f9fa';
        container.style.borderColor = '#a0a0a0';
        container.style.boxShadow = 'none';

        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
            handleFile(e.dataTransfer.files[0]);
        }
    });

    fileInput.addEventListener('change', (e) => {
        if (e.target.files && e.target.files.length > 0) {
            handleFile(e.target.files[0]);
        }
    });

    // Helper function to read file and display it
    function handleFile(file) {
        if (!file.type.startsWith('image/')) {
            alert('Please select an image file.');
            return;
        }
        
        const reader = new FileReader();
        reader.onload = function(event) {
            imgPreview.src = event.target.result;
            imgPreview.style.opacity = '1';
            
            // Adjust overlay text style for better readability against the new image
            textDiv.style.background = 'rgba(255, 255, 255, 0.85)';
            textDiv.style.boxShadow = '0 0 15px rgba(0,0,0,0.1)';
        };
        reader.readAsDataURL(file);
    }

    return container;
}