File Upload in Rails Form: How to Use in Ruby on Rails

To use file upload in a Rails form, add form_with model: @model, local: true, html: { multipart: true } and use file_field for the file input. Then, attach the uploaded file in the controller using Active Storage's attach method on the model's attachment attribute.

Syntax

Use form_with with multipart: true to enable file uploads. Inside the form, use file_field to create the file input. In the controller, use model.file_attachment.attach(params[:model][:file_attachment]) to save the uploaded file.

• form_with: Creates the form tag.
• multipart: true: Allows file data to be sent.
• file_field: Input for selecting files.
• attach: Saves the uploaded file to the model.

ruby

form_with model: @user, local: true, html: { multipart: true } do |form|
  form.file_field :avatar
  form.submit
end

Example

This example shows a simple User model with an avatar image upload using Active Storage. The form allows selecting a file, and the controller attaches it to the user.

ruby

# app/models/user.rb
class User < ApplicationRecord
  has_one_attached :avatar
end

# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def new
    @user = User.new
  end

  def create
    @user = User.new(user_params)
    if @user.save
      if params[:user][:avatar]
        @user.avatar.attach(params[:user][:avatar])
      end
      redirect_to @user, notice: "User created with avatar."
    else
      render :new
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :avatar)
  end
end

# app/views/users/new.html.erb
<%= form_with model: @user, local: true, html: { multipart: true } do |form| %>
  <%= form.label :name %><br>
  <%= form.text_field :name %><br><br>

  <%= form.label :avatar %><br>
  <%= form.file_field :avatar %><br><br>

  <%= form.submit "Create User" %>
<% end %>

Output

Rendered form with text input for name and file input for avatar; on submit, user is saved with attached avatar file.

Common Pitfalls

• Forgetting multipart: true in the form causes file data not to be sent.
• Not permitting the file parameter in strong params can block file upload.
• Not calling attach on the model's attachment attribute means the file won't save.
• Using form_for without multipart: true is a legacy mistake; prefer form_with.

ruby

# Wrong: Missing multipart
form_with model: @user, local: true do |form|
  form.file_field :avatar
  form.submit
end

# Right: Include multipart
form_with model: @user, local: true, html: { multipart: true } do |form|
  form.file_field :avatar
  form.submit
end

Quick Reference

Remember these key points for file uploads in Rails forms:

• Use form_with with multipart: true.
• Use file_field for file inputs.
• Permit file params in the controller.
• Attach files using Active Storage's attach method.
• Ensure Active Storage is set up with rails active_storage:install and migrations run.

Key Takeaways

Always add multipart: true in form_with to enable file uploads.

Use file_field in the form to let users select files.

Attach uploaded files to models using Active Storage's attach method.

Permit file parameters in strong params to allow file data.

Set up Active Storage in your Rails app before using file uploads.