FileInput

Molecule

Drag-and-drop file upload with validation, file list, and individual remove actions.

Preview

Profile photo

Click to upload or drag and drop

PNG or JPG, max 2 MB

Accepted: image/*

Code

<%- include('modules/ui/FileInput', {
  label: 'Profile photo',
  hint: 'PNG or JPG, max 2 MB',
  accept: 'image/*'
}) %>

Preview

Attachments

Click to upload or drag and drop

Up to 5 MB each

Code

<%- include('modules/ui/FileInput', {
  label: 'Attachments',
  hint: 'Up to 5 MB each',
  multiple: true
}) %>

Preview

Disabled upload

Click to upload or drag and drop

Code

<%- include('modules/ui/FileInput', { label: 'Disabled upload', disabled: true }) %>

Preview

Document

Click to upload or drag and drop

PDF only

Accepted: .pdf

Please upload a valid PDF file.

Code

<%- include('modules/ui/FileInput', {
  label: 'Document',
  hint: 'PDF only',
  accept: '.pdf',
  error: 'Please upload a valid PDF file.'
}) %>

<%- include('./FileInput/FileInput', locals) %>