Uploading Image Using Angularjs and Rails Active Storage

Ruby on Rails (RoR) how to use Active Storage Attachments to make a featured image among a given list of multiple images? Upload to database and edit images.

Quite recently, I wanted to brand a featured paradigm using the Ruby on Track Active Storage Attachment has_many clan method for my posts. Hence I thought of sharing it for the benefit of RoR developers. My email: gpsmartcodes@gmail.com

Let united states create a new RoR project by issuing the command:

$ rails new postblog

$ cd postblog

I assume that the reader has knowledge of making models, migrations, controllers etc using the Ruby-red on Rails CLI.

Next we will create a scaffold and do a migration.

$ track k scaffold Postal service title:cord body:text

Now do the migration.

$ rake db:migrate

Bank check if rails is being served by your browser by going to http://localhost:3000 after issuing the command:

$ rails south

You lot will be greeted with this start off RoR screen.

Note my Rails version and Ruby-red version. Yours should be minimum this version for everything to go on smoothly. If you motion over to the http://localhost:3000/posts, you will encounter this:

At present, our scaffold is ready. Exercise a sample posting and come across the browser again:

We will install agile storage now. Read this guide as well: https://guides.rubyonrails.org/active_storage_overview.html

$ runway active_storage:install

Once this is washed, you will come across a migration file existence added past active_storage. Become to your editor and open this file. You lot volition meet something like this inside this file. Add in the line highlighted in red to it. We are adding a field boolean chosen fpic (to denote featured picture).

create_table :active_storage_attachments do |t|
t.cord :proper name, cypher: imitation
t.references :record, zip: false, polymorphic: true, index: imitation
t.references :blob, nix: imitation
t.boolean :fpic , :default => imitation, :zero => false
t.datetime :created_at, zippo: faux

t.alphabetize [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
t.foreign_key :active_storage_blobs, column: :blob_id
end

At present, that done, let us do the migration.

$ rake db:migrate

Remember to restart server. If yous look at database tables, you will see two extra tables named active_storage_attachments and active_storage_blobs are created. The active_storage_attachments will take an extra boolean field "fpic" also.

We are at present ready to tweak the model, view and controller.

Find post.rb inside the models binder and edit it like so:

class Mail service < ApplicationRecord
has_many_attached :images
end

Find posts_controller inside the controller folder and edit information technology like so:

def post_params
params.require(:post).permit(:title, :trunk, images: [])
terminate

Now remember to restart server .

Again in the posts_controller, add these 2 methods: (ane) To reset the featuring and (2) To set the featuring

def make_image_featured
imgs = ActiveStorage::Zipper.where(:record_id => params[:id])
imgs.update_all(:fpic => 0)

@images = ActiveStorage::Attachment.find(params[:img_id])
@images.update_attributes(:fpic => true)
redirect_back(fallback_location: posts_path)
terminate

def reset_featured
#@images = ActiveStorage::Zipper.all
@images = ActiveStorage::Zipper.where(:record_id => params[:id])
@images.update_all(:fpic => false)
redirect_back(fallback_location: posts_path)
stop

We need to add proper routes for view and controller communication. Become to routes.rb

resources :posts practice
member do
get :make_image_featured
get :reset_featured
cease
end

Now, we will go to various view files and do changes…

(i) Edit.html.erb

<h1>Editing Post</h1>
<%= return 'form', mail service: @post %>

<% if @post.images.fastened? %>
<% for paradigm in @post.images.where(:fpic => i) do %>
<%= image_tag(prototype, :class => "feats") %>
<%= link_to 'X', make_image_featured_post_path(:img_id => image.id),
:method => 'get' %>
<% cease %>
<% for epitome in @post.images.where(:fpic => 0) practise %>
<%= image_tag(image, :class => "postshow") %>
<%= link_to '10', make_image_featured_post_path(:img_id => epitome.id),
:method => 'get' %>
<% end %>
<% end %>

<%= link_to 'Show', @post %> |
<%= link_to 'Reset Featured', reset_featured_post_path %> |
<%= link_to 'Dorsum', posts_path %>

(2) Index.html.erb (relevant portion but shown..)

<% if post.images.attached? %>
<% for paradigm in mail.images.where(:fpic => 1) do %>
<%= image_tag(image, class: 'feats') %>
<% end %>
<% for image in post.images.where(:fpic => 0) do %>
<%= image_tag(image, form: 'postshow') %>
<% stop %>
<% terminate %>
<td><%= link_to 'Prove', post %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

(3) Edit the form.html.erb partial…

<%= form.file_field(:images, multiple: true) %><br>

(4) Bear witness.html.erb

<p id="observe"><%= notice %></p>

<p>
<strong>Title:</strong>
<%= @mail service.title %>
</p>

<p>
<strong>Torso:</potent>
<%= @post.body %>
</p>
<% if @post.images.attached? %>
<% for prototype in @post.images.where(:fpic => 1) do %>
<%= image_tag(image, form: "feats") %>
<% stop %>
<% for prototype in @post.images.where(:fpic => 0) practice %>
<%= image_tag(image, grade: "postshow") %>
<% finish %>
<% end %>
<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

Next, add in a stylesheet with the below minimum styles

.postshow {
max-width: 100%;
height: 200px;
padding: 5px;
}

.feats {
max-width: 100%;
tiptop: 300px;
padding: 5px;
}

Done ! We volition see the outputs now

The New Post has Add files box now

The show view display…

Editing feature to fix and reset featured image.

Display of featured epitome

Some other display, featured epitome inverse

That's all folks! Quite easy, isn't information technology?

Yous can find my codes in Github repository:

https://github.com/guruputran/featured

thompsonwassely.blogspot.com

Source: https://medium.com/@gpsmartcodes/ruby-on-rails-ror-how-to-use-activestorage-attachment-to-make-a-featured-image-among-a-given-91b083330d7f

Share this post