Styled file upload controls with drag-and-drop support and visual feedback. Accepts single or multiple files with customizable styling and validation options for modern form interfaces.
File inputs allow users to select and upload files.
You can restrict the file types that can be selected using the accept attribute.
Enable multiple file selection with the multiple attribute.
File inputs can be styled with additional CSS classes to change their appearance.
.my-2.flex.flex-col.gap-4
= daisy_label(for: "file_primary", title: "Primary File Input")
= daisy_file_input(name: "file_primary", id: "file_primary", css: "file-input-primary")
= daisy_label(for: "file_secondary", title: "Secondary File Input", css: "mt-4")
= daisy_file_input(name: "file_secondary", id: "file_secondary", css: "file-input-secondary")
= daisy_label(for: "file_accent", title: "Accent File Input", css: "mt-4")
= daisy_file_input(name: "file_accent", id: "file_accent", css: "file-input-accent")
File inputs can use the file-input-ghost class for a minimalist appearance
that only shows borders on focus.
Ghost style with background container:
Ghost style with background container:
.my-2.flex.flex-col.gap-4
= daisy_label(for: "file_ghost", title: "Ghost Style File Input")
= daisy_file_input(name: "file_ghost", id: "file_ghost", css: "file-input-ghost")
.mt-4.p-4.border.rounded-lg.bg-accent.text-accent-content
%p.text-sm.mb-2 Ghost style with background container:
= daisy_label(for: "file_ghost_bg", title: "Upload Files")
= daisy_file_input(name: "file_ghost_bg", id: "file_ghost_bg", css: "file-input-ghost")
File inputs can be disabled using the disabled attribute.
File inputs can be marked as required using the required attribute.
The built-in Form Builder extension provides an easy way to use file inputs in your forms by extracting the name and ID attributes from the form object and attributes.
= form_with(url: "#", method: :post, scope: :user, html: { multipart: true }) do |form|
.my-2.flex.flex-col.gap-4
= form.daisy_label(:avatar)
= form.daisy_file_input(:avatar)
= form.daisy_label(:documents, "Upload Documents", css: "mt-4")
= form.daisy_file_input(:documents, multiple: true)
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.