Using a custom direct upload controller with Rails Active Storage to limit file size before any data is uploaded

new.html.erb

<%= form_with model: @post, data: { controller: 'upload', action: 'direct-upload:error@window->upload#error' } do |f| %>
  <%= f.file_field(:image, data: { 'direct-upload-url' => uploads_url }) %>
  <%= f.submit %>
<% end %>

routes.rb

Rails.application.routes.draw do
  post "/uploads", to: "uploads#create", as: :uploads
end

upload_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  error(event) {
    event.preventDefault();
    
    alert(
      "Your file could not be uploaded, please try again with a file that is under 1MB in size.",
    );
  }
}

uploads_controller.rb

class UploadsController < ActiveStorage::DirectUploadsController
  def create
    return head :payload_too_large if blob_params.fetch(:byte_size) > 1.megabyte
    
    super
  end

  private
  
  def blob_params
    params.require(:blob).permit(:byte_size)
  end
end