File uploads with Active Storage in Ruby on Rails - Mini Project: Build & Apply

File uploads with Active Storage

📖 Scenario: You are building a simple Rails app where users can upload profile pictures. You want to use Active Storage to handle the file uploads easily and securely.

🎯 Goal: Build a Rails model and form that allows users to upload a profile picture using Active Storage. The uploaded image should be attached to the user and ready to display.

📋 What You'll Learn

Create a User model with Active Storage attachment for profile picture

Add a configuration variable to limit allowed file types

Write code to attach the uploaded file to the user

Complete the form view to accept file uploads

💡 Why This Matters

🌍 Real World

File uploads are common in web apps for user avatars, documents, and media. Active Storage simplifies handling these files securely.

💼 Career

Understanding Active Storage is essential for Rails developers building apps with user-generated content and file management.

1

Create User model with Active Storage attachment

Create a Rails model called User with has_one_attached :profile_picture to enable file uploads.

Ruby on Rails

# Create User model with Active Storage attachment
# Your code here

Hint

Use has_one_attached :profile_picture inside the User model to set up Active Storage.

2

Add allowed file types configuration

Add a constant ALLOWED_FILE_TYPES in the User model with the array ['image/png', 'image/jpg', 'image/jpeg'] to restrict upload types.

Ruby on Rails

class User < ApplicationRecord
  has_one_attached :profile_picture

  # Add allowed file types constant
  # Your code here
end

Hint

Define ALLOWED_FILE_TYPES as a constant array inside the User model.

3

Attach uploaded file to user

In the UsersController, write code inside the create action to attach the uploaded file from params[:user][:profile_picture] to the new User instance using user.profile_picture.attach(params[:user][:profile_picture]).

Ruby on Rails

class UsersController < ApplicationController
  def create
    @user = User.new(user_params)
    # Attach uploaded profile picture
    # Your code here
    if @user.save
      redirect_to @user
    else
      render :new
    end
  end

  private

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

Hint

Use @user.profile_picture.attach(params[:user][:profile_picture]) before saving the user.

4

Complete the form to accept file uploads

In the user form view, add a file field with form.file_field :profile_picture inside the form_with block. Also, ensure the form has multipart: true option.

Ruby on Rails

  
  
  
  # Your code here
  

Hint

Use form.file_field :profile_picture and set multipart: true in form_with.

Practice

1. What is the purpose of has_one_attached in a Rails model when using Active Storage?

easy

A. To link a single uploaded file to a model instance

B. To create a database table for storing files

C. To validate the file type before upload

D. To automatically resize uploaded images

Solution

1. Step 1: Understand Active Storage attachment macros

   The has_one_attached macro in a Rails model declares a one-to-one association between the model and a single uploaded file.

2. Step 2: Differentiate from other options

   It does not create tables, validate file types, or resize images by itself; those are handled elsewhere.

3. Final Answer:

   To link a single uploaded file to a model instance -> Option A

4. Quick Check:

   has_one_attached = single file link [OK]

Hint: Remember: has_one_attached means one file per model [OK]

Common Mistakes:

• Confusing has_one_attached with database table creation
• Thinking it validates or processes files automatically
• Mixing it up with has_many_attached for multiple files

2. Which of the following is the correct way to add a file input field in a Rails form for uploading a file with Active Storage?

easy

A. <%= form.file_field :avatar %>

B. <%= form.text_field :avatar %>

C. <%= form.submit :avatar %>

D. <%= form.select :avatar %>

Solution

1. Step 1: Identify the correct form helper for file uploads

   The file_field helper creates a file input allowing users to select files for upload.

2. Step 2: Exclude other input types

   Text fields, submit buttons, and select dropdowns do not allow file selection.

3. Final Answer:

   <%= form.file_field :avatar %> -> Option A

4. Quick Check:

   file_field = file input [OK]

Hint: Use file_field for file inputs in forms [OK]

Common Mistakes:

• Using text_field instead of file_field for uploads
• Confusing submit button with file input
• Using select dropdown for file selection

3. Given the following model and form code, what will be the result after submitting a file?

class User < ApplicationRecord
  has_one_attached :profile_pic
end

# In the form view:
<%= form_with model: @user do |form| %>
  <%= form.file_field :profile_pic %>
  <%= form.submit %>
<% end %>

medium

A. The file will be ignored because has_one_attached is missing

B. The uploaded file will be attached to the user's profile_pic

C. The form will raise a syntax error due to missing multipart option

D. The file will be saved as a string in the profile_pic column

Solution

1. Step 1: Check model attachment declaration

   The model uses has_one_attached :profile_pic, so it can attach one file to the user.

2. Step 2: Understand form_with default behavior

   Rails 6+ automatically sets multipart for file uploads in form_with, so the file will be sent correctly.

3. Final Answer:

   The uploaded file will be attached to the user's profile_pic -> Option B

4. Quick Check:

   has_one_attached + file_field = file attached [OK]

Hint: form_with sets multipart automatically for file_field [OK]

Common Mistakes:

• Assuming file is saved as string in DB column
• Thinking multipart option must be manually added
• Believing file is ignored without extra code

4. Identify the error in this code snippet for attaching multiple files using Active Storage:

class Product < ApplicationRecord
  has_one_attached :images
end

# In the form:
<%= form.file_field :images, multiple: true %>

medium

A. The model should not declare any attachment for multiple files

B. file_field does not support the multiple option

C. The form must use text_field instead of file_field

D. has_one_attached should be has_many_attached for multiple files

Solution

1. Step 1: Check model attachment type

   The model uses has_one_attached, which supports only one file, but the form allows multiple files.

2. Step 2: Correct attachment macro for multiple files

   To attach multiple files, the model must use has_many_attached.

3. Final Answer:

   has_one_attached should be has_many_attached for multiple files -> Option D

4. Quick Check:

   Multiple files need has_many_attached [OK]

Hint: Use has_many_attached for multiple file uploads [OK]

Common Mistakes:

• Using has_one_attached with multiple: true
• Thinking file_field can't handle multiple files
• Not declaring attachment in model for uploads

5. You want to allow users to upload multiple images for a gallery and display thumbnails after upload. Which combination of model and view code correctly implements this with Active Storage?

hard

A. Model: has_many_attached :photosView: form.text_field :photos

B. Model: has_one_attached :photosView: form.file_field :photos

C. Model: has_many_attached :photosView: form.file_field :photos, multiple: true

D. Model: has_one_attached :photosView: form.file_field :photos, multiple: true

Solution

1. Step 1: Choose correct model attachment for multiple files

   To attach multiple images, use has_many_attached :photos in the model.

2. Step 2: Use file_field with multiple option in the form

   The form must use file_field :photos, multiple: true to allow selecting multiple files.

3. Step 3: Display thumbnails after upload

   With this setup, you can iterate over @model.photos to show thumbnails.

4. Final Answer:

   Model: has_many_attached :photos and View: form.file_field :photos, multiple: true -> Option C

5. Quick Check:

   Multiple files need has_many_attached + multiple: true [OK]

Hint: Multiple files = has_many_attached + file_field multiple: true [OK]

Common Mistakes:

• Using has_one_attached for multiple files
• Omitting multiple: true in file_field
• Using text_field instead of file_field for uploads