ruby rails opensource

Unlock Active Storage: A Beautiful Dashboard for Your Rails App 🚀

Hey Rails devs! 👋 If you’re using Active Storage in your Ruby on Rails applications (and let’s be honest, it’s pretty awesome for handling file uploads!), you’ve probably experienced its power and simplicity. But have you ever wished you could easily see what’s going on under the hood? Like, a proper dashboard to visualize your blobs, attachments, and overall storage usage?

I found myself wanting exactly that. Digging through the console or database to check on files, their metadata, or how much space they’re consuming can be a bit tedious. That’s why I built Active Storage Dashboard!

Image description

What is Active Storage Dashboard?

Active Storage Dashboard is a mountable Rails engine that provides a sleek, modern, and (dare I say) beautiful dashboard to monitor and inspect your Active Storage data. It’s designed to be:

  • Informative: Get an instant overview of your storage stats.
  • Intuitive: Easily browse and dive into details.
  • Lightweight: No external JavaScript or CSS dependencies! Just clean, vanilla JS and CSS.

The “Why”: Solving a Common Pain Point

Active Storage is fantastic for developers, but it lacks a built-in user interface for administrators or developers to quickly:

  • See how many files have been uploaded.
  • Check the total storage consumed.
  • Quickly find a specific blob or attachment.
  • Inspect metadata or preview files without writing custom code.
  • Understand the distribution of content types.

Active Storage Dashboard aims to fill this gap, providing a dedicated space for all things Active Storage within your app.

✨ Key Features You’ll Love

  • 📊 Comprehensive Dashboard Overview:
    • Total Blobs, Attachments, and Variant Records counts.
    • Total storage used (prettily formatted, of course!).
    • Distribution of top content types.
    • Latest activity feed.
    • Average and largest file sizes.
    • A cool count-up animation for stats!
  • 🔍 Detailed Browsing & Inspection:
    • Blobs List: View all your blobs with key info like filename, content type, size, and creation date. Switch between table and card views! Image description
    • Blob Details: See all attributes of a blob, its metadata, associated attachments, and variant records.
    • Attachments List & Details: Similarly, browse and inspect all your attachments and their link to records and blobs.
    • Variant Records (Rails 6.1+): If you’re using variants, you can inspect those too!
  • 🖼️ Media Previews:
    • Directly preview images, videos, and audio files.
    • Embed and view PDFs.
    • See generated previews for other previewable file types. Image description
  • ⬇️ Easy Downloads: Download any file directly from the list or detail views.

  • 📱 Responsive Design: The dashboard looks great on desktop and mobile devices.

🛠️ Installation & Usage: Get Up and Running in Minutes!

  1. Add the gem to your Gemfile:
    gem 'active_storage_dashboard'
    
  2. Bundle install:
    $ bundle install
    
  3. Mount the engine in your config/routes.rb:
    Rails.application.routes.draw do
      # ... your other routes
      mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
      # Pro-tip: Keep the mount path simple (no special characters)
      # for smooth URL generation within the engine.
    end
    

That’s it! Fire up your Rails server and navigate to /active-storage-dashboard (or whatever path you chose) to see the magic.

🔒 A Note on Security

This dashboard provides full visibility into your Active Storage data. For production environments, it’s highly recommended to protect this route with authentication. Here’s an example using Devise (assuming you have an admin? method on your User model):

# config/routes.rb
authenticate :user, ->(user) { user.admin? } do
  mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
end

Or a more generic approach for other authentication systems:

constraints lambda { |req| req.session[:user_id].present? && User.find_by(id: req.session[:user_id])&.admin? } do
  mount ActiveStorageDashboard::Engine, at: "/active-storage-dashboard"
end

Give It a Spin!

Whether you’re debugging file upload issues, monitoring storage growth, or just curious about what’s in your Active Storage, this dashboard can be a real timesaver.

I built this because I needed it, and I hope it can be useful to the wider Rails community too!

🔗 Check out the project on GitHub: https://github.com/giovapanasiti/active_storage_dashboard

Feel free to try it out, star the repo if you find it helpful, and open issues or PRs for any bugs or feature suggestions.

Happy coding!