Image and file handling in Ruby on Rails - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Active Storage direct upload behavior

What will happen when a user uploads a file using Active Storage direct upload in a Rails form with has_one_attached :avatar configured?

Ruby on Rails

<%= form_with model: @user, local: true do |form| %>
  <%= form.file_field :avatar, direct_upload: true %>
  <%= form.submit %>
<% end %>

A The file is uploaded directly to the cloud storage before the form is submitted, then the form submits the signed blob ID.

B The file is uploaded only after the form is submitted, as part of the controller's create action.

C The file is not uploaded at all because direct_upload: true disables uploads.

D The file is uploaded to a temporary local folder and then moved to cloud storage after form submission.

💡 Hint

Think about how direct upload changes the upload timing in Active Storage.

With direct upload enabled, the file is sent directly to the cloud storage service (like Amazon S3) before the form submits. The form then sends the signed blob ID to associate the file with the model.

📝 Syntax

intermediate

Correct syntax for attaching multiple files in Rails Active Storage

Which code snippet correctly attaches multiple images to a model with has_many_attached :photos?

Ruby on Rails

class Product < ApplicationRecord
  has_many_attached :photos
end

# In controller or console:

A product.photos.attach(params[:photos].map { |p| { io: p, filename: p.original_filename } })

B product.photos.attach([params[:photos]])

C product.photos.attach(params[:photos])

D product.photos.attach(io: params[:photos], filename: 'image.jpg')

💡 Hint

For multiple file uploads from forms, Active Storage accepts an array of files directly.

Active Storage handles arrays of uploaded files directly from params. Option C is the correct and idiomatic syntax.

🔧 Debug

advanced

Fixing missing image preview in Rails Active Storage

A developer tries to display an uploaded image preview with image_tag user.avatar but sees a broken image icon. What is the most likely cause?

Ruby on Rails

class User < ApplicationRecord
  has_one_attached :avatar
end

# In view:
<%= image_tag user.avatar %>

A The image_tag helper needs a URL, so it should be <code>image_tag url_for(user.avatar)</code>.

B The avatar attachment is missing from the database, so the user must re-upload the image.

C Active Storage is not installed, so image_tag cannot display attachments.

D The image_tag helper only works with local files, not Active Storage attachments.

💡 Hint

Active Storage attachments need to be converted to URLs for image_tag.

Active Storage attachments are not direct URLs. Using url_for converts the attachment to a URL that image_tag can use to display the image.

❓ state_output

advanced

Result of purging an attachment in Rails Active Storage

What happens to the database and storage when you call user.avatar.purge on a user with an attached avatar?

Ruby on Rails

user.avatar.purge

A Only the database record is deleted; the file remains in storage until manually removed.

B The attachment record is deleted from the database and the file is removed from storage immediately.

C The file is deleted from storage but the database record remains until the user is deleted.

D Nothing happens because purge only marks the attachment for deletion later.

💡 Hint

Purging means removing both database and storage data immediately.

Calling purge deletes the attachment record from the database and removes the actual file from the storage service right away.

🧠 Conceptual

expert

Understanding Active Storage variants and transformations

Which statement best describes how Active Storage handles image variants when you request user.avatar.variant(resize_to_limit: [100, 100])?

A The variant is generated on the client side using JavaScript after the image loads.

B Active Storage pre-generates all variants when the original image is uploaded.

C Variants are stored as separate attachments linked to the original image.

D Active Storage generates the resized image variant on demand and caches it for future requests.

💡 Hint

Think about when image processing happens in Active Storage.

Active Storage creates image variants lazily when first requested, then caches them to avoid repeated processing.

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