File Upload
A drag-and-drop file upload component with preview support. Supports both form builder mode (with Rails form objects) and standalone usage. Shows file previews for images and file info for other types.
Preview & Code
_file_upload.html.erb
███
████ ██████ █████████ █████████
█████ ████ ████ ████████
███ █████████ ██████ █████ ██ ███ ██
███ ██████ █████████████████████████ █████ ██ ██████████ ████████
██████ ████████ ███████ ███████ ██████████ █████ █████ ███ ██ ██ ████ ██
██ ███ ██
██████████ ██████
file_upload_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ███████████ ██████████ ██████████████ ███████████
██████ ██████ █ █
████████ ███████
███████ ███████
█████████ █ █████ ████████ ████████ █████ █
█
file_upload_component.rb
█ ██████████████████████ ████
█████ ███████████████████ █ ███████████████████
███████████ ██████ ███████████ ██████ ███████ ██████ ████████
██████████ ██████████ ██████████ ██████████ ██████
███ ███████████
█████ ████
██████████ ████
█████ ████
file_upload_component.html.erb
████ █████████████ ███ █████████████████ ███ ███ ████████████████████ ████████████████ ███
██ ██ ███████████████ ██
██████ ██████████ █████████████ ████
███ ██████ ██
██ ██ █████████ ██
█████ ███████████████████ ████████████████
██ ███ ██
████████
██ ███ ██
file_upload_controller.js
██████ █ ██████████ █ ████ ████████████████████
██████ ███████ █████ ███████ ██████████ █
██████ ███████ █ █████████ ███████████ ██████████ ██████████████ ███████████
██████ ██████ █ █
████████ ███████
███████ ███████
█████████ █ █████ ████████ ████████ █████ █
█
Changelog
- Initial release with form builder and standalone modes
- Drag-and-drop file selection
- Image preview support
- File size and type validation
- Multiple file upload support
- Dark mode support
Get Full Access
Unlock the source code for this component and all others. One-time payment for lifetime access.
Get Access Now