Mastering Active Storage: Powering Professional Image Uploads in Rails with Active Storage and Action Text

User Avatar with Active Storage

Active Storage in Rails is your go-to tool for handling uploads, like pictures, with ease. It’s like your trusty sidekick, making file management a breeze for your web apps. Plus, it plays nice with Action Text for creating stunning, interactive content. 🚀 #RailsMagic

Starting With Scratch

rails new demo -d postgresql #-d postgresql is optional

To kickstart your new Rails app named “demo,” run rails -s to check if everything's running smoothly. If all looks good, we're all set for the next steps! 👍

 rails g scaffold user name:string bio:string

Once you’ve set up the essential view, model, and controller for your user, the final touch is to route your app’s home page to display users. To do this, simply add the following line to your route configuration:
root ‘users#index’ now we are almost ready to see the active storage magic

Setting Up Active Storage and Action Text

rails active_storage:install

rails action_text:install

Let’s narrow down our focus to a crucial line in the “Gemfile” and the output from the above two commands. If “image_processing” isn’t activated, simply uncomment it, and then run “bundle install” to make sure it gets installed. 🛠️ after that run rails db:migrate to migrate those migration files

Gemfile

terminal output

If you prefer using MiniMagick over Vips, add this line to your ‘development.rb’ file: config.active_storage.variant_processor = :mini_magick; to enable it.

config\environments\development.rb

Ready For Attachments and Action Text

We have multiple options for adding attachments to users. You can provide image, an array of images, combine images with Action Text for multiple attachments, and even perform various text processing operations. depending on the use let's breakdown one by one

Attachments pre-on-model and controllers

Incorporate the following line into the model where you intend to utilize it, and specify the particular line you wish to use. here we are using it on user model in demo app

#app\models\user.rb
class User < ApplicationRecord
    has_one_attached :avatar  #for single image upload
    has_many_attached :images #for multiple image upload
    has_rich_text :content #for rich text editor
end

#aslo turn on the params of the user in the controller like this
#app\controllers\users_controller.rb
def user_params
  params.require(:user).permit(:name, :bio, :avatar, images: [], :content)
end

app\controllers\users_controller.rb

Attachments on View Form and Rendering

Starting With Form Partial of Users

#app\views\users\_form.html.erb
#add following form line for relevent from control on user or your model

  <div>
    <%= form.rich_text_area :content %>  <%# This is the rich text editor %>
  </div>

  <div>
    <%= form.label :avatar %>
    <%= form.file_field :avatar %> <%# This is the avatar. i.e. single image uplaod %>
  </div>

  <div>
    <%= form.label :images %>
    <%= form.file_field :images, multiple: true %> <%# This is the images. i.e. multiple image upload %>
  </div>

Following the attachment setup, navigate to the user creation form page or the location where you are currently implementing it, for example here

Note => For now you haven't set the show yet for the user

Let's add a view

  #app\views\users\_user.html.erb
  #add following form line for relevent view on user 

  <%= user.content %> <br /> <%# this is for viewing the reach content attachment we add i.e rich content %>
  
  <%= image_tag user.avatar %> <br /> <%# this is for viewing the avatar attachment we add i.e  single image%>

  
  <% user.images.each do |image| %> <%# this is for viewing the images attachment we add i.e multiple image %>
    <%= image_tag image %>
  <% end %>

That's it let's test it now

New User Part-1

new user part 2

New User Render

Attachments Render

Congratulations, you’ve come a long way! In the next part of this article, we’ll delve into resizing images to achieve the desired dimensions — striking a balance between not too large and not too small. Additionally, we’ll explore creating a JSON builder for versatile use across different applications.