File uploads with Active Storage in Ruby on Rails - Performance & Optimization

Performance: File uploads with Active Storage

MEDIUM IMPACT

This affects page load speed and interaction responsiveness during file uploads and downloads.

Uploading files in a Rails app using Active Storage

Ruby on Rails

class DocumentsController < ApplicationController
  def new
    @document = Document.new
  end

  def create
    @document = Document.new(document_params)
    if @document.save
      redirect_to @document
    else
      render :new
    end
  end

  private

  def document_params
    params.require(:document).permit(:title, :file)
  end
end

# In the form view:
<%= form_with model: @document, local: false do |form| %>
  <%= form.text_field :title %>
  <%= form.file_field :file, direct_upload: true %>
  <%= form.submit %>
<% end %>

Using direct uploads sends files straight to cloud storage, freeing the Rails server from handling large file data and improving responsiveness.

📈 Performance GainReduces server load and response blocking, improving INP and scalability.

Uploading files in a Rails app using Active Storage

Ruby on Rails

class DocumentsController < ApplicationController
  def create
    @document = Document.new(document_params)
    if @document.save
      redirect_to @document
    else
      render :new
    end
  end

  private

  def document_params
    params.require(:document).permit(:title, :file)
  end
end

Files are uploaded through the Rails server, causing increased server CPU and memory usage and slower response times.

📉 Performance CostBlocks server threads during upload, increasing response time and potentially causing slow INP for users.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Uploading files through Rails server	Minimal DOM changes	0	0	[!] OK but server load increases
Direct uploads with Active Storage	Minimal DOM changes	0	0	[OK] Efficient and scalable

Rendering Pipeline

File uploads with Active Storage affect the network and server processing stages. Direct uploads bypass the Rails server for file data, reducing server processing and improving user interaction speed.

→Network

→Server Processing

→Interaction Responsiveness

⚠️ BottleneckServer Processing when files are uploaded through Rails server

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness during file uploads and downloads.

Optimization Tips

1Use direct uploads to send files straight to cloud storage and reduce server load.

2Avoid uploading large files through the Rails server to prevent blocking and slow responsiveness.

3Check network requests in DevTools to confirm uploads go directly to storage endpoints.

Performance Quiz - 3 Questions

What is the main performance benefit of using direct uploads with Active Storage?

A Files are uploaded multiple times for safety

B Files upload faster because they are compressed by Rails

C Files upload directly to cloud storage, reducing server load

D Files are stored temporarily in browser cache

DevTools: Network

How to check: Open DevTools, go to Network tab, start a file upload, and observe if the upload request goes directly to cloud storage URL or through your Rails server URL.

What to look for: Direct upload requests go to cloud storage endpoints (e.g., Amazon S3), reducing server upload time and improving responsiveness.

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