File Upload Component

File Upload Component

Axiom01 provides styling for native file input elements and a flexible structure for creating custom drag-and-drop file upload areas. This component is designed to be user-friendly and visually consistent with the framework's aesthetic.

Basic File Input

Code Example (Basic File Input)

<div class="file-upload-container">
<label for="basic-file-input" class="button primary">Choose File</label>
<input type="file" id="basic-file-input">
<p id="basic-file-name">No file chosen</p>
</div>

<script>
document.getElementById('basic-file-input').addEventListener('change', function() {
    const fileName = this.files.length > 0 ? this.files[0].name : 'No file chosen';
    document.getElementById('basic-file-name').textContent = fileName;
});
</script>

Drag-and-Drop File Upload Area

Code Example (Drag-and-Drop)

<div class="file-upload-container" id="drop-area">
<i class="fas fa-cloud-upload-alt"></i>
<p>Drag & drop files here, or <label for="drop-file-input">browse</label></p>
<input type="file" id="drop-file-input" multiple>
<ul class="file-list" id="uploaded-files"></ul>
</div>

<script>
const dropArea = document.getElementById('drop-area');
const dropFileInput = document.getElementById('drop-file-input');
const uploadedFilesList = document.getElementById('uploaded-files');

;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults (e) {
    e.preventDefault();
    e.stopPropagation();
}

;['dragenter', 'dragover'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => dropArea.classList.add('highlight'), false);
});

;['dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, () => dropArea.classList.remove('highlight'), false);
});

dropArea.addEventListener('drop', handleDrop, false);
dropFileInput.addEventListener('change', () => handleFiles(dropFileInput.files));

function handleDrop(e) {
    const dt = e.dataTransfer;
    const files = dt.files;
    handleFiles(files);
}

function handleFiles(files) {
    for (const file of files) {
        const listItem = document.createElement('li');
        listItem.innerHTML = `
            <span class="file-name">${file.name}</span>
            <button class="remove-file">&times;</button>
        `;
        uploadedFilesList.appendChild(listItem);
        listItem.querySelector('.remove-file').addEventListener('click', () => listItem.remove());
    }
}
</script>

Usage Guidelines

For custom file upload areas, the .file-upload-container class provides a styled drop zone. You'll need JavaScript to handle the drag-and-drop events, process file selections, and display file names or previews. The example above provides a basic JavaScript implementation for this.

Remember to handle server-side file uploads securely and provide clear feedback to the user about upload progress and success/failure.