Image and file handling in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to attach an image file to a Rails model using Active Storage.

Ruby on Rails

class User < ApplicationRecord
  has_one_attached :[1]
end

Drag options to blanks, or click blank then click option'

Aphoto

Bimage

Cavatar

Dfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using plural form like 'avatars' instead of singular 'avatar'.

Using generic names like 'file' which are less descriptive.

The has_one_attached method defines a one-to-one attachment for the model. Here, avatar is the common name used for user profile images.

2fill in blank

medium

Complete the code to permit the image attachment parameter in a Rails controller.

Ruby on Rails

def user_params
  params.require(:user).permit(:name, [1])
end

Drag options to blanks, or click blank then click option'

A:avatar

B:image

C:photo

D:file

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to permit the attachment parameter causes the file not to be saved.

Using string instead of symbol for the parameter.

To allow file uploads, the attachment name (here :avatar) must be permitted in strong parameters.

3fill in blank

hard

Fix the error in the view code to display the attached image if it exists.

Ruby on Rails

<% if @user.[1].attached? %>
  <%= image_tag @user.avatar %>
<% end %>

Drag options to blanks, or click blank then click option'

Aavatar

Bimage

Cphoto

Dfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different attachment name causes a runtime error.

Calling attached? on the model instead of the attachment.

The method attached? checks if the named attachment exists. It must match the attachment name defined in the model.

4fill in blank

hard

Fill both blanks to create a variant of the attached image resized to 100x100 pixels.

Ruby on Rails

<%= image_tag @user.avatar.variant([1]: [2]) %>

Drag options to blanks, or click blank then click option'

Aresize_to_limit

B[100, 100]

C[200, 200]

Dresize_to_fill

Attempts:

3 left

💡 Hint

Common Mistakes

Using resize_to_fill crops the image, which may not be desired.

Passing size as a string instead of an array.

The variant method creates a resized version of the image. resize_to_limit resizes the image to fit within the given dimensions without cropping.

5fill in blank

hard

Fill all three blanks to create a hash of filenames and their byte sizes for all attached files.

Ruby on Rails

files_info = @document.files.each_with_object({}) do |file, hash|
  hash[[1]] = file.blob.[2]
end

files_info.keys.first == [3]

Drag options to blanks, or click blank then click option'

Afile.filename.to_s

Bbyte_size

Cfile.filename

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using file.filename directly as a hash key causes issues because it is not a string.

Using size instead of byte_size returns nil.

To get the filename as a string, use file.filename.to_s. The file size in bytes is accessed with blob.byte_size.

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