Rails 5.2 Active Storage如何为附件添加自定义排序属性？

Great question! Active Storage doesn’t include built-in support for custom attachment attributes like display_order out of the box, but it’s totally feasible to add this functionality by extending the underlying join table that links your Project model to file blobs. Here’s a step-by-step solution:

1. Add the display_order Column to the Attachments Table #

Active Storage uses active_storage_attachments as a join table between your records (like Project) and ActiveStorage::Blob instances. We’ll add our integer attribute directly to this table.

First, generate a migration:

rails generate migration AddDisplayOrderToActiveStorageAttachments display_order:integer

Then open the generated migration file and update it to include defaults and an index (for better query performance):

class AddDisplayOrderToActiveStorageAttachments < ActiveRecord::Migration[7.0]
  def change
    add_column :active_storage_attachments, :display_order, :integer, default: 0, null: false
    # Index for fast ordered queries on a project's images
    add_index :active_storage_attachments, [:record_type, :record_id, :name, :display_order]
  end
end

Run the migration to apply the changes:

rails db:migrate

2. Set display_order When Uploading Attachments #

When you attach images to a Project, you’ll need to explicitly set the display_order for each attachment. Here’s how to handle this in your controller (adjust based on your frontend’s parameter structure):

Example Controller Logic (Upload Order-Based) #

class ProjectsController < ApplicationController
  def create
    @project = Project.new(project_params.except(:images))

    if params[:project][:images].present?
      params[:project][:images].each_with_index do |image_file, index|
        # Attach the image first
        @project.images.attach(image_file)
        # Grab the newly created attachment and set its display order
        latest_attachment = @project.images.last.attachment
        latest_attachment.update!(display_order: index + 1) # Start from 1 instead of 0 if preferred
      end
    end

    if @project.save
      redirect_to @project, notice: "Project created with images in order!"
    else
      render :new
    end
  end

  private

  def project_params
    params.require(:project).permit(:name, :description, images: [])
  end
end

Example Controller Logic (Explicit Order from Frontend) #

If your frontend sends explicit order values instead of relying on upload order, adjust the loop:

params[:project][:images].each do |image_data|
  blob = ActiveStorage::Blob.create_and_upload!(
    io: image_data[:file],
    filename: image_data[:file].original_filename
  )
  @project.images.attach(blob)
  attachment = @project.attachments.find_by(blob: blob)
  attachment.update!(display_order: image_data[:display_order])
end

3. Define an Ordered Attachment Scope #

To easily fetch images in the correct order, add a custom scope to your has_many_attached association:

class Project < ApplicationRecord
  has_many_attached :images do
    def ordered
      order(display_order: :asc)
    end
  end
end

Now you can fetch images in sorted order with:

@project.images.ordered # Returns images sorted by display_order ascending

4. Update Order Dynamically (Optional) #

If you want users to reorder images after upload, add an action to handle order updates:

Controller Action #

def update_image_order
  @project = Project.find(params[:id])
  attachment = @project.attachments.find(params[:attachment_id])
  attachment.update!(display_order: params[:display_order])
  head :ok
end

Route #

Add this to your config/routes.rb:

resources :projects do
  patch :update_image_order, on: :member
end

Notes for Existing Data #

If you already have attachments in your database, run a one-off script to set initial display_order values (e.g., based on creation time):

ActiveStorage::Attachment.where(record_type: "Project", name: "images").order(:created_at).each_with_index do |attachment, index|
  attachment.update!(display_order: index + 1)
end

内容的提问来源于stack exchange，提问作者paxer