HTML5 Drag and Drop Interface Development

Advanced File Upload Implementation

// Modern HTML5 drag and drop with File API
class AdvancedDragDropHandler {
    constructor(dropZone, options = {}) {
        this.dropZone = dropZone;
        this.options = {
            allowedTypes: options.allowedTypes || [],
            maxFileSize: options.maxFileSize || 10 * 1024 * 1024, // 10MB
            maxFiles: options.maxFiles || 10,
            preview: options.preview || true,
            ...options
        };

        this.initialize();
    }

    initialize() {
        // Prevent default browser drag behaviors
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            this.dropZone.addEventListener(eventName, this.preventDefaults, false);
            document.body.addEventListener(eventName, this.preventDefaults, false);
        });

        // Highlight drop zone on drag
        ['dragenter', 'dragover'].forEach(eventName => {
            this.dropZone.addEventListener(eventName, this.highlight.bind(this), false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            this.dropZone.addEventListener(eventName, this.unhighlight.bind(this), false);
        });

        // Handle dropped files
        this.dropZone.addEventListener('drop', this.handleDrop.bind(this), false);
    }

    async handleDrop(e) {
        const dt = e.dataTransfer;
        const files = [...dt.files];

        // Validate files
        const validFiles = files.filter(file => this.validateFile(file));

        if (validFiles.length !== files.length) {
            this.showError('Some files were rejected due to validation rules');
        }

        // Process valid files
        await this.processFiles(validFiles);
    }

    validateFile(file) {
        // Type validation
        if (this.options.allowedTypes.length > 0) {
            const isValidType = this.options.allowedTypes.some(type =>
                file.type.match(type) || file.name.match(new RegExp(`\\.${type}$`, 'i'))
            );
            if (!isValidType) return false;
        }

        // Size validation
        if (file.size > this.options.maxFileSize) {
            return false;
        }

        return true;
    }

    async processFiles(files) {
        const promises = files.map(file => this.uploadFile(file));

        try {
            const results = await Promise.allSettled(promises);
            this.handleUploadResults(results);
        } catch (error) {
            this.handleError(error);
        }
    }
}