Drag And Drop Movie File Uploader

function processImage(originalImg, dropText = "Drag & Drop Movie Files Here") {
    // Create the main container (dropzone)
    const container = document.createElement('div');
    container.style.width = '100%';
    container.style.maxWidth = '600px';
    container.style.minHeight = '300px';
    container.style.border = '3px dashed #ccc';
    container.style.borderRadius = '10px';
    container.style.display = 'flex';
    container.style.flexDirection = 'column';
    container.style.alignItems = 'center';
    container.style.justifyContent = 'center';
    container.style.backgroundColor = '#f9f9f9';
    container.style.color = '#555';
    container.style.fontFamily = 'Arial, sans-serif';
    container.style.boxSizing = 'border-box';
    container.style.padding = '30px';
    container.style.transition = 'all 0.3s ease';
    container.style.margin = '0 auto';

    // Create an image element to use the provided originalImg as an icon
    const icon = new Image();
    icon.src = originalImg.src;
    icon.style.maxWidth = '120px';
    icon.style.maxHeight = '120px';
    icon.style.objectFit = 'contain';
    icon.style.marginBottom = '15px';
    icon.style.opacity = '0.8';
    icon.style.pointerEvents = 'none';

    // Create text instruction
    const textElement = document.createElement('h3');
    textElement.innerText = dropText;
    textElement.style.margin = '0 0 10px 0';
    textElement.style.fontSize = '20px';
    textElement.style.pointerEvents = 'none';

    // Subtext for format information
    const subText = document.createElement('p');
    subText.innerText = "Supports MP4, WebM, OGG";
    subText.style.margin = '0';
    subText.style.fontSize = '14px';
    subText.style.color = '#888';
    subText.style.pointerEvents = 'none';

    // File details container
    const fileDetails = document.createElement('div');
    fileDetails.style.marginTop = '20px';
    fileDetails.style.fontSize = '14px';
    fileDetails.style.textAlign = 'center';
    fileDetails.style.display = 'none'; // Hidden initially

    // Video preview container
    const previewContainer = document.createElement('div');
    previewContainer.style.width = '100%';
    previewContainer.style.display = 'flex';
    previewContainer.style.flexDirection = 'column';
    previewContainer.style.alignItems = 'center';
    previewContainer.style.marginTop = '20px';

    // Append default elements to container
    container.appendChild(icon);
    container.appendChild(textElement);
    container.appendChild(subText);
    container.appendChild(fileDetails);
    container.appendChild(previewContainer);

    // Drag and drop event listeners
    container.addEventListener('dragover', (e) => {
        e.preventDefault();
        container.style.backgroundColor = '#e8f4ff';
        container.style.borderColor = '#007bff';
    });

    container.addEventListener('dragleave', (e) => {
        e.preventDefault();
        container.style.backgroundColor = '#f9f9f9';
        container.style.borderColor = '#ccc';
    });

    container.addEventListener('drop', (e) => {
        e.preventDefault();
        container.style.backgroundColor = '#f9f9f9';
        container.style.borderColor = '#ccc';

        const files = e.dataTransfer.files;
        if (files.length > 0) {
            const file = files[0];
            
            // Check if the file is a video
            if (file.type.startsWith('video/')) {
                // Update text
                textElement.innerText = "Movie Ready for Upload";
                icon.style.display = 'none';
                subText.style.display = 'none';

                // Display file details
                fileDetails.style.display = 'block';
                fileDetails.innerHTML = `
                    <strong>File:</strong> ${file.name} <br> 
                    <strong>Size:</strong> ${(file.size / (1024 * 1024)).toFixed(2)} MB
                `;

                // Clear any previous previews
                previewContainer.innerHTML = '';

                // Create video player
                const videoElement = document.createElement('video');
                videoElement.controls = true;
                videoElement.style.width = '100%';
                videoElement.style.maxHeight = '300px';
                videoElement.style.borderRadius = '8px';
                videoElement.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
                videoElement.style.backgroundColor = '#000';
                
                // Load local file as a playble preview
                const fileURL = URL.createObjectURL(file);
                videoElement.src = fileURL;
                
                // Add simulated upload button
                const uploadBtn = document.createElement('button');
                uploadBtn.innerText = "Upload Movie";
                uploadBtn.style.marginTop = '15px';
                uploadBtn.style.padding = '10px 20px';
                uploadBtn.style.backgroundColor = '#28a745';
                uploadBtn.style.color = '#fff';
                uploadBtn.style.border = 'none';
                uploadBtn.style.borderRadius = '5px';
                uploadBtn.style.fontSize = '16px';
                uploadBtn.style.cursor = 'pointer';
                uploadBtn.style.transition = 'background-color 0.2s';
                
                uploadBtn.onmouseover = () => uploadBtn.style.backgroundColor = '#218838';
                uploadBtn.onmouseout = () => uploadBtn.style.backgroundColor = '#28a745';
                uploadBtn.onclick = () => {
                    uploadBtn.innerText = "Uploading...";
                    uploadBtn.disabled = true;
                    uploadBtn.style.backgroundColor = '#6c757d';
                    
                    // Simulate an upload process
                    setTimeout(() => {
                        uploadBtn.innerText = "Uploaded Successfully!";
                        uploadBtn.style.backgroundColor = '#17a2b8';
                        
                        setTimeout(() => {
                            // Reset state
                            textElement.innerText = dropText;
                            icon.style.display = 'block';
                            subText.style.display = 'block';
                            fileDetails.style.display = 'none';
                            previewContainer.innerHTML = '';
                            URL.revokeObjectURL(fileURL); // Clean up memory
                        }, 3000);
                    }, 1500);
                };

                previewContainer.appendChild(videoElement);
                previewContainer.appendChild(uploadBtn);
            } else {
                alert("Please drop a valid movie/video file.");
            }
        }
    });

    return container;
}