Frank UI
Home Components Examples
Theme Customizer

File Input

The file input component provides a clean Metro-inspired drop/select area with file preview, size restriction checks, and native synchronization so that standard HTML forms submit correctly.

Single File Upload

Removing the multiple attribute turns the component into a single-file input, automatically replacing any previously selected file in the preview and file list on subsequent selections.

File Upload Restrictions

You can restrict the accepted file formats programmatically using FileUploader.setImagesOnly(input) or FileUploader.setMimeTypes(input, typesArray). They set the browser's native dialog picker filter and validate file content types in JavaScript.

<!-- Form wrapper supporting file uploads -->
<form action="file.php" method="POST" enctype="multipart/form-data" class="card">
    <div class="card-content">
        <div class="file-input-wrapper">
            <label class="file-label">
                Select Files
                <input type="file" name="files[]" data-role="file" data-max-size="1048576" multiple>
            </label>
            <div class="file-preview"></div>
        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn primary">Upload via Standard POST</button>
        <button type="button" id="ajax-upload-btn" class="btn success">Upload via AJAX</button>
    </div>
</form>

<!-- Single File Upload -->
<form action="file.php" method="POST" enctype="multipart/form-data" class="card">
    <div class="card-content">
        <div class="file-input-wrapper">
            <label class="file-label">
                Select One File
                <input type="file" name="single_file" data-role="file">
            </label>
            <div class="file-preview"></div>
        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn primary">Upload Single File</button>
    </div>
</form>

<script>
// Optional: Handling submission via AJAX / FormData
const ajaxBtn = document.getElementById('ajax-upload-btn');
const fileInput = document.querySelector('input[data-role="file"]');
ajaxBtn.addEventListener('click', () => {
    // Component helper keeps native files in sync and packages them into FormData
    const formData = FileUploader.getFormData(fileInput, 'files[]');
    fetch('file.php?ajax=1', { method: 'POST', body: formData });
});
</script>

API Reference

The global FileUploader component exposes several utility methods to programmatically retrieve files, set restrictions, or package payloads for AJAX submissions:

Method Parameters Description
FileUploader.getFiles(input) input (HTMLElement) Returns an Array of the currently selected File objects. Works with both single and multiple file inputs.
FileUploader.getFormData(input, fieldName) input (HTMLElement),
fieldName (String, optional, defaults to 'files[]')		 Returns a pre-packaged FormData object populated with the selected files, ready to be sent directly as a Fetch/AJAX body.
FileUploader.setImagesOnly(input) input (HTMLElement) Restricts the input to image files only. Configures the native browser chooser dialog filter (adds accept="image/*") and validates selections in JavaScript.
FileUploader.setMimeTypes(input, typesArray) input (HTMLElement),
typesArray (Array of Strings)		 Restricts selection to custom formats (e.g. ['application/json', '.pdf']). Applies constraints to both the native browser chooser dialog and JavaScript validation.