@n8d/htwoo-core/lib/js/file.js

hTWOo is a Fluent Design Framework purely in HTML and CSS

/**
 * File upload handler class
 * Manages file uploads with drag and drop functionality
 */
export class FileUploadHandler {
    /**
     * Initialize the file upload handler
     * @param htmlElement - The file upload container element
     */
    constructor(htmlElement) {
        this._files = [];
        /**
         * Handle the dragover event
         */
        this.dragOver = (event) => {
            event.preventDefault();
            this._fileLabel.classList.add('drag-over'); // Visual feedback
        };
        /**
         * Handle the dragleave event
         */
        this.dragLeave = (event) => {
            event.preventDefault();
            this._fileLabel.classList.remove('drag-over');
        };
        /**
         * Handle the drop event
         */
        this.dragDrop = (event) => {
            event.preventDefault();
            this._fileLabel.classList.remove('drag-over');
            const files = event.dataTransfer?.files;
            if (files && files.length > 0) {
                console.log('Files dropped:', files);
                this.fileChangedEvent({
                    target: { files }
                });
            }
        };
        /**
         * Handle file selection changes
         */
        this.fileChangedEvent = (event) => {
            let files;
            console.debug('FileUploadHandler.fileChanged', event);
            const target = event.target;
            if (!target.files || target.files.length === 0) {
                this._infileOutput.innerHTML = "";
                return;
            }
            files = Array.from(target.files);
            const fileOutput = document.createElement('ul');
            fileOutput.classList.add('hoo-infile-list');
            console.debug('FileUploadHandler', files);
            files.forEach(file => {
                const fileItem = document.createElement('li');
                fileItem.innerText = file.name;
                fileOutput.appendChild(fileItem);
            });
            this._infileOutput.innerHTML = `<div class='hoo-infile-selection'>${this._infileOutput.title || 'Files Selected'}</div>${fileOutput.outerHTML}`;
        };
        this._fileControl = htmlElement;
        console.debug('FileUploadHandler', this._fileControl);
        this._fileLabel = htmlElement.querySelector('.hoo-infile-label');
        if (!this._fileLabel) {
            throw new Error('File label element not found (.hoo-infile-label)');
        }
        this._fileLabel.addEventListener('dragover', this.dragOver);
        this._fileLabel.addEventListener('dragleave', this.dragLeave);
        this._fileLabel.addEventListener('drop', this.dragDrop);
        this._originalFileControl = this._fileControl.querySelector('.hoo-infile-context');
        if (!this._originalFileControl) {
            throw new Error('File input element not found (.hoo-infile-context)');
        }
        console.debug('FileUploadHandler', this._originalFileControl, this._originalFileControl.getAttribute('aria-describedby'));
        this._originalFileControl.addEventListener('change', this.fileChangedEvent);
        const describedBy = this._originalFileControl.getAttribute('aria-describedby');
        if (!describedBy) {
            throw new Error('File input is missing aria-describedby attribute');
        }
        console.debug('FileUploadHandler', describedBy, this._infileOutput, `#${describedBy.trim()}`);
        this._infileOutput = document.querySelector(`#${describedBy.trim()}`);
        if (!this._infileOutput) {
            throw new Error(`Element with id "${describedBy.trim()}" not found`);
        }
        console.debug('Infile Output:', this._infileOutput);
    }
}
//# sourceMappingURL=file.js.map