Please bookmark this page to avoid losing your image tool!

Image Drag And Drop File Uploader

(Free & Supports Bulk Upload)

Drag & drop your images here or

The result will appear here...
You can edit the below JavaScript code to customize the image tool.
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;
}

Free Image Tool Creator

Can't find the image tool you're looking for?
Create one based on your own needs now!

Description

The Image Drag and Drop File Uploader provides a user-friendly interface for selecting and previewing images. Users can either drag and drop image files directly into the designated area or click to browse their local files. Once an image is uploaded, the tool generates an instant visual preview within the container. This utility is ideal for web developers looking to implement intuitive file selection components for galleries, profile picture updates, or content management systems.

Leave a Reply

Your email address will not be published. Required fields are marked *