Bard Attachment Field

An enhanced file upload field for Rails forms, powered by web components. Provides drag-and-drop uploads, image/video previews, and seamless ActiveStorage direct upload integration.

• Drag-and-drop file uploads
• Image and video previews
• Direct uploads to ActiveStorage
• Multiple file support
• Client-side validation (required, accepted types, max size)
• Upload progress dialog
• Persists attachments through server-side validation errors
• Supports Rails 7.1, 7.2, 8.0, and 8.1

Add to your Gemfile:

gem "bard-attachment_field"

The engine ships a prebuilt input-attachment.js bundle and adds it to the Sprockets precompile list automatically. Load it as a module script in your layout:

<script type="module" src="<%= asset_path("input-attachment.js") %>"></script>

The model must declare an ActiveStorage attachment:

class Post < ApplicationRecord
  has_one_attached :image
  has_many_attached :images
end

In your form, use attachment_field just like any other form builder field. It automatically sets the form's encoding to multipart:

<%= form.attachment_field :image %>
<%= form.attachment_field :images, multiple: true %>

<%= form.attachment_field :image, accepts: "image", max: 5.megabytes, required: true %>
<%= form.attachment_field :media, accepts: "image,video", multiple: true %>

Pass a block to render your own children inside the <input-attachment> element instead of the default persisted-attachment markup. The block receives the resolved HTML options:

<%= form.attachment_field :image do |options| %>
  <!-- custom <attachment-file> markup -->
<% end %>

src powers both the preview and the download link. When src points at a smaller preview image, set href to point the download link at the original file instead, and optionally download to control the downloaded filename:

<%= form.attachment_field :image do |options| %>
  <% if @post.image.attached? %>
    <attachment-file
      name="<%= options["name"] %>"
      src="<%= url_for @post.image.variant(:thumb) %>"
      href="<%= rails_blob_path @post.image, disposition: :attachment %>"
      download="<%= @post.image.filename %>"
      filename="<%= @post.image.filename %>"
      value="<%= @post.image.signed_id %>"
      preview="true"
      filetype="image"></attachment-file>
  <% end %>
<% end %>

This project has two parts: the Ruby gem and the Stencil web components in input-attachment/.

The web components use Bun:

cd input-attachment
bun install
bun run build   # builds app/assets/javascripts/input-attachment.js
bun run test    # JS component tests

The JavaScript bundle must be built before running the Ruby test suite, which is driven by Cucumber against a self-contained Rails app:

bundle exec cucumber features/

Multi-Rails testing uses Appraisal with the gemfiles in gemfiles/.

MIT