Image and file handling in Ruby on Rails - Mini Project: Build & Apply

Image and File Handling in Rails

📖 Scenario: You are building a simple Rails app where users can upload profile pictures. The app will store these images and display them on the user's profile page.

🎯 Goal: Learn how to set up image uploading and display using Rails built-in Active Storage. You will create a User model with an attached profile image, configure Active Storage, and display the uploaded image on a profile page.

📋 What You'll Learn

Create a User model with Active Storage attachment

Configure Active Storage in the Rails app

Write code to attach an image file to a user

Display the uploaded image on the user's profile page

💡 Why This Matters

🌍 Real World

Many web apps let users upload profile pictures, product images, or documents. Handling files and images is a common feature.

💼 Career

Understanding Active Storage is essential for Rails developers to manage user uploads securely and efficiently.

1

Set up User model with Active Storage attachment

Create a Rails model called User with a string attribute name. Then add an Active Storage attachment called profile_image to the User model using has_one_attached :profile_image.

Ruby on Rails

# Create User model with name attribute
# Add has_one_attached :profile_image in User model

Hint

Use rails generate model User name:string to create the model, then add has_one_attached :profile_image inside the model file.

2

Configure Active Storage in the Rails app

Run the Rails command to install Active Storage and generate its tables. Then run the migrations to update the database.

Ruby on Rails

# Run rails active_storage:install and rails db:migrate commands
# Your code here

Hint

Use the terminal commands rails active_storage:install and rails db:migrate to set up Active Storage tables.

3

Attach an image file to a user

Write Ruby code to find a User by id 1 and attach an image file located at Rails.root.join('app/assets/images/sample.jpg') to the user's profile_image attachment using attach method.

Ruby on Rails

# Find user with id 1 and attach profile_image
# Your code here

Hint

Use User.find(1) to get the user and attach(io: File.open(...), filename: 'sample.jpg') to attach the image.

4

Display the uploaded image on the user's profile page

In the Rails view file, write code to display the profile_image of a User object called @user using the image_tag helper and url_for to generate the image URL.

Ruby on Rails

# Your code here

Hint

Check if the image is attached with @user.profile_image.attached? before displaying it with image_tag url_for(...).

Practice

1. Which method in Rails is used to associate a single file attachment with a model?

easy

A. has_many_attached

B. has_one_attached

C. attach_file

D. file_attachment

Solution

1. Step 1: Understand Rails Active Storage associations

   Rails uses has_one_attached to link a single file to a model and has_many_attached for multiple files.

2. Step 2: Identify the correct method for single file

   Since the question asks for a single file, has_one_attached is the correct method.

3. Final Answer:

   has_one_attached -> Option B

4. Quick Check:

   Single file attachment = has_one_attached [OK]

Hint: Single file uses has_one_attached, multiple files use has_many_attached [OK]

Common Mistakes:

• Confusing has_one_attached with has_many_attached
• Using non-existent methods like attach_file
• Thinking file_attachment is a Rails method

2. Which of the following is the correct syntax to attach a file to a model instance in a Rails controller?

easy

A. user.avatar.attach(params[:avatar])

B. user.attach_avatar(params[:avatar])

C. user.avatar = params[:avatar]

D. user.attach_file(:avatar, params[:avatar])

Solution

1. Step 1: Recall the Active Storage attach syntax

   To attach a file, you call attach on the attachment association, passing the file parameter.

2. Step 2: Match the syntax to the options

   user.avatar.attach(params[:avatar]) uses user.avatar.attach(params[:avatar]), which is the correct Rails syntax.

3. Final Answer:

   user.avatar.attach(params[:avatar]) -> Option A

4. Quick Check:

   Attach file with .attach method on association [OK]

Hint: Use .attach on the attachment association to add files [OK]

Common Mistakes:

• Using non-existent methods like attach_avatar
• Assigning file directly to association
• Trying to call attach_file which is not a Rails method

3. Given the following code in a Rails view:

<% if @user.avatar.attached? %>
  <%= image_tag @user.avatar %>
<% else %>
  <p>No avatar uploaded</p>
<% end %>

What will be displayed if the user has not uploaded an avatar?

medium

A. An error because avatar is nil

B. The image tag with a broken image

C. The text 'No avatar uploaded'

D. Nothing will be displayed

Solution

1. Step 1: Understand the attached? method

   The attached? method returns true if a file is attached, false otherwise.

2. Step 2: Analyze the conditional rendering

   If no avatar is attached, the else block runs, showing the text 'No avatar uploaded'.

3. Final Answer:

   The text 'No avatar uploaded' -> Option C

4. Quick Check:

   attached? false shows else text [OK]

Hint: Check attached? before showing file to avoid errors [OK]

Common Mistakes:

• Assuming image_tag works with nil attachment
• Expecting no output instead of else block
• Confusing attached? with presence of file path

4. Consider this controller code snippet:

def update
  @user = User.find(params[:id])
  @user.avatar.attach(params[:avatar])
  if @user.save
    redirect_to @user
  else
    render :edit
  end
end

What is the main issue with this code when attaching a file?

medium

A. Using attach before save causes an error

B. params[:avatar] should be inside a hash like avatar: params[:avatar]

C. attach should be called only after @user.save

D. attach does not save the file automatically

Solution

1. Step 1: Understand attach behavior

   The attach method links the file to the model but does not save the model automatically.

2. Step 2: Analyze the save call

   The code calls @user.save after attaching, which saves the model and the attachment together correctly.

3. Step 3: Identify the issue

   attach does not save the file automatically correctly states that attach alone does not save the file; save must be called to persist changes.

4. Final Answer:

   attach does not save the file automatically -> Option D

5. Quick Check:

   attach links file, save persists it [OK]

Hint: Remember to call save after attach to persist files [OK]

Common Mistakes:

• Thinking attach saves file immediately
• Calling attach after save instead of before
• Passing params incorrectly to attach

5. You want to allow users to upload multiple images for a product in Rails. Which combination of model and view code correctly supports this?

Model:

class Product < ApplicationRecord
  ?
end

View form snippet:

<%= form_with model: @product, local: true do |form| %>
  <%= form.file_field :images, multiple: true %>
  <%= form.submit %>
<% end %>

hard

A. Model: has_many_attached :images

B. Model: has_one_attached :images

C. Model: has_many :images

D. Model: has_one :images

Solution

1. Step 1: Identify multiple file attachment method

   For multiple files, Rails uses has_many_attached in the model.

2. Step 2: Match with form file_field multiple option

   The form uses multiple: true on file_field, which pairs with has_many_attached.

3. Final Answer:

   Model: has_many_attached :images -> Option A

4. Quick Check:

   Multiple files need has_many_attached [OK]

Hint: Use has_many_attached with multiple: true in file_field [OK]

Common Mistakes:

• Using has_one_attached for multiple files
• Confusing has_many association with Active Storage
• Not setting multiple: true in the form