Image and file handling in Ruby on Rails

Introduction

We use image and file handling to let users upload and show pictures or files in a web app. It helps store and display these files easily.

When users need to upload profile pictures.

When you want to attach documents to a form.

When showing product images in an online store.

When saving and displaying user-submitted files like PDFs or images.

Syntax

Ruby on Rails

has_one_attached :image
has_many_attached :files

Use has_one_attached for a single file like a profile photo.

Use has_many_attached for multiple files like photo albums.

Examples

This lets each user have one avatar image attached.

Ruby on Rails

class User < ApplicationRecord
  has_one_attached :avatar
end

This allows a post to have many images attached.

Ruby on Rails

class Post < ApplicationRecord
  has_many_attached :images
end

Sample Program

This example shows how to set up a Product model with one photo. The controller attaches the uploaded file. The view shows the photo if it exists.

Ruby on Rails

class Product < ApplicationRecord
  has_one_attached :photo
end

# In a controller, to attach an uploaded file:
# @product.photo.attach(params[:photo])

# In a view (ERB) to show the image:
# <% if @product.photo.attached? %>
#   <%= image_tag @product.photo %>
# <% else %>
#   <p>No photo available</p>
# <% end %>

Important Notes

Rails uses Active Storage to handle files easily.

Files are stored on disk or cloud services like Amazon S3.

Always check if a file is attached before showing it to avoid errors.

Summary

Use has_one_attached or has_many_attached to link files to models.

Attach files in controllers and display them in views.

Check if files exist before showing them to users.

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