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.