File uploads with Active Storage in Ruby on Rails - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to attach a file to a 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'

Aavatar

Bfile

Cimage

Dattachment

Attempts:

3 left

💡 Hint

Common Mistakes

Using a plural name like 'avatars' instead of singular.

Using a generic name like 'file' which is less descriptive.

The has_one_attached method defines a one-to-one attachment named avatar for the User model.

2fill in blank

medium

Complete the code to permit file attachment in the controller's strong parameters.

Ruby on Rails

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

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

Aavatar_upload

Bavatar_attachment

Cavatar_file

Davatar

Attempts:

3 left

💡 Hint

Common Mistakes

Permitting a non-existent parameter like 'avatar_attachment'.

Using incorrect parameter names that don't match the model.

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

3fill in blank

hard

Fix the error in the view to display the attached image if present.

Ruby on Rails

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

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

Aavatar

Bavatar_file

Cavatar_attachment

Davatar_upload

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect attachment names that cause errors.

Calling attached? on something other than the attachment.

The method attached? should be called on the attachment name avatar to check if a file is attached.

4fill in blank

hard

Fill both blanks to create a form field for file upload using Rails form helpers.

Ruby on Rails

<%= form_with model: @user do |form| %>
  <%= form.[1] :[2] %>
  <%= form.submit %>
<% end %>

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

Afile_field

Bavatar

Ctext_field

Dimage_field

Attempts:

3 left

💡 Hint

Common Mistakes

Using text_field or image_field which do not handle file uploads.

Using a wrong attachment name.

Use file_field helper with the attachment name avatar to allow file uploads in the form.

5fill in blank

hard

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

Ruby on Rails

files_info = @document.files.map { |file| { [1]: file.filename.[2], [3]: file.byte_size } }

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

Aname

Bto_s

Csize

Dfilename

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect keys that don't describe the data.

Not converting filename to string before use.

Use filename.to_s to get the file name as a string, and byte_size for the file size. The hash keys are filename and size.

Practice

1. What is the purpose of has_one_attached in a Rails model when using Active Storage?

easy

A. To link a single uploaded file to a model instance

B. To create a database table for storing files

C. To validate the file type before upload

D. To automatically resize uploaded images

Solution

1. Step 1: Understand Active Storage attachment macros

   The has_one_attached macro in a Rails model declares a one-to-one association between the model and a single uploaded file.

2. Step 2: Differentiate from other options

   It does not create tables, validate file types, or resize images by itself; those are handled elsewhere.

3. Final Answer:

   To link a single uploaded file to a model instance -> Option A

4. Quick Check:

   has_one_attached = single file link [OK]

Hint: Remember: has_one_attached means one file per model [OK]

Common Mistakes:

• Confusing has_one_attached with database table creation
• Thinking it validates or processes files automatically
• Mixing it up with has_many_attached for multiple files

2. Which of the following is the correct way to add a file input field in a Rails form for uploading a file with Active Storage?

easy

A. <%= form.file_field :avatar %>

B. <%= form.text_field :avatar %>

C. <%= form.submit :avatar %>

D. <%= form.select :avatar %>

Solution

1. Step 1: Identify the correct form helper for file uploads

   The file_field helper creates a file input allowing users to select files for upload.

2. Step 2: Exclude other input types

   Text fields, submit buttons, and select dropdowns do not allow file selection.

3. Final Answer:

   <%= form.file_field :avatar %> -> Option A

4. Quick Check:

   file_field = file input [OK]

Hint: Use file_field for file inputs in forms [OK]

Common Mistakes:

• Using text_field instead of file_field for uploads
• Confusing submit button with file input
• Using select dropdown for file selection

3. Given the following model and form code, what will be the result after submitting a file?

class User < ApplicationRecord
  has_one_attached :profile_pic
end

# In the form view:
<%= form_with model: @user do |form| %>
  <%= form.file_field :profile_pic %>
  <%= form.submit %>
<% end %>

medium

A. The file will be ignored because has_one_attached is missing

B. The uploaded file will be attached to the user's profile_pic

C. The form will raise a syntax error due to missing multipart option

D. The file will be saved as a string in the profile_pic column

Solution

1. Step 1: Check model attachment declaration

   The model uses has_one_attached :profile_pic, so it can attach one file to the user.

2. Step 2: Understand form_with default behavior

   Rails 6+ automatically sets multipart for file uploads in form_with, so the file will be sent correctly.

3. Final Answer:

   The uploaded file will be attached to the user's profile_pic -> Option B

4. Quick Check:

   has_one_attached + file_field = file attached [OK]

Hint: form_with sets multipart automatically for file_field [OK]

Common Mistakes:

• Assuming file is saved as string in DB column
• Thinking multipart option must be manually added
• Believing file is ignored without extra code

4. Identify the error in this code snippet for attaching multiple files using Active Storage:

class Product < ApplicationRecord
  has_one_attached :images
end

# In the form:
<%= form.file_field :images, multiple: true %>

medium

A. The model should not declare any attachment for multiple files

B. file_field does not support the multiple option

C. The form must use text_field instead of file_field

D. has_one_attached should be has_many_attached for multiple files

Solution

1. Step 1: Check model attachment type

   The model uses has_one_attached, which supports only one file, but the form allows multiple files.

2. Step 2: Correct attachment macro for multiple files

   To attach multiple files, the model must use has_many_attached.

3. Final Answer:

   has_one_attached should be has_many_attached for multiple files -> Option D

4. Quick Check:

   Multiple files need has_many_attached [OK]

Hint: Use has_many_attached for multiple file uploads [OK]

Common Mistakes:

• Using has_one_attached with multiple: true
• Thinking file_field can't handle multiple files
• Not declaring attachment in model for uploads

5. You want to allow users to upload multiple images for a gallery and display thumbnails after upload. Which combination of model and view code correctly implements this with Active Storage?

hard

A. Model: has_many_attached :photosView: form.text_field :photos

B. Model: has_one_attached :photosView: form.file_field :photos

C. Model: has_many_attached :photosView: form.file_field :photos, multiple: true

D. Model: has_one_attached :photosView: form.file_field :photos, multiple: true

Solution

1. Step 1: Choose correct model attachment for multiple files

   To attach multiple images, use has_many_attached :photos in the model.

2. Step 2: Use file_field with multiple option in the form

   The form must use file_field :photos, multiple: true to allow selecting multiple files.

3. Step 3: Display thumbnails after upload

   With this setup, you can iterate over @model.photos to show thumbnails.

4. Final Answer:

   Model: has_many_attached :photos and View: form.file_field :photos, multiple: true -> Option C

5. Quick Check:

   Multiple files need has_many_attached + multiple: true [OK]

Hint: Multiple files = has_many_attached + file_field multiple: true [OK]

Common Mistakes:

• Using has_one_attached for multiple files
• Omitting multiple: true in file_field
• Using text_field instead of file_field for uploads