Photo by Sam McGhee on Unsplash.

Quickly Upload Videos To Your Blog Posts Using Action Text In Rails 6

Action Text With Videos - Is It Possible?!

Obviously we all know that adding Action Text with videos to your blog posts is possible. If it wasn’t possible to use Active Storage video uploads in Action Text, this article wouldn’t exist after all! How do you upload videos using Action Text though? Well, stick around and I’ll show you.

This was kind of a pain to set up, but hopefully this quick tutorial will be worth it. I also covered this tutorial in video form on the Deanin YouTube channel, if you’re more of a video learner. The video + time codes to skip around to what you need are next to this post.

Video Version of Tutorial

Prefer the Action Text Video? I’ve included timestamps for your convenience!

0:00 Video Overview & Intro
0:47 Creating The Blog Post With Views Scaffold
3:55 Adding Action Text To Your Rails 6 Blog Posts
7:20 Adding Image Uploads To Your Action Text Blog Posts
9:10 Adding Video Uploads To Your Action Text Blog Posts
13:52 Enhance Action Text Videos With VideoJS
17:08 Video Summary & Outro

Part 1 - Creating The Blog Post With Views Scaffold

The first step for this tutorial is creating something in a new Rails app to work with. For this we’ll create a blank post scaffold with a title and a view counter. This view counter should increment whenever the user visits the show page for the blog posts.


    # In your terminal
    rails g scaffold post title views:integer
    
    # In db/migrate folder, update your migration
    # to set the views default value to 0
    class CreatePosts < ActiveRecord::Migration[6.0]
      def change
        create_table :posts do |t|
          t.string :title
          t.integer :views, default: 0
    
          t.timestamps
        end
      end
    end
    
    # Inside your app/controllers/posts_controller.rb
    # add these lines to the existing method.
    # ...
      def show
        # @post.views += 1
        @post.views = @post.views + 1
        @post.save
      end
    # ...

Part 2 - Adding Action Text

Next we need to add Action Text to the application. I’ve covered that previously on this blog over on this page. Basically we need to run a generator and set up our MVC appropriately. Code is included below.


    # In your terminal
    rails action_text:install
    rails db:migrate
    
    # Inside your gemfile, uncomment image_processing gem
    gem 'image_processing', '~> 1.2'
    
    # In your terminal
    bundle install
    # If you don't have imagemagic, run the install command
    # or visit imagemagick.org
    sudo apt-get install imagemagick
    
    # Inside your app/models/post.rb
    class Post < ApplicationRecord
        has_rich_text :body
    end
    
    # Inside your app/controllers/posts_controller.rb
    # add these lines to the existing method.
    # ...
    # Only allow a list of trusted parameters through.
    def post_params
      params.require(:post).permit(:title, :views, :body)
    end
    
    # Inside your app/views/posts/_form.html.erb file, update it so that it looks like this
    <%= form_with(model: post, local: true) do |form| %>
      <% if post.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>
    
          <ul>
            <% post.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      <% end %>

  <div class="field">
    <%= form.label :title %>
    <%= form.text_field :title %>
  </div>

  <div class="field">
    <%= form.label :body %>
    <%= form.rich_text_area :body %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

    # Inside your app/views/show.html.erb file,
    # update it so that it looks like this
    <p id="notice"><%= notice %></p>

    <p>
      <strong>Title:</strong>
      <%= @post.title %>
    </p>
    
    <p>
      <strong>Views:</strong>
      <%= @post.views %>
    </p>
    
    <%= @post.body %>
    
    <%= link_to 'Edit', edit_post_path(@post) %> |
    <%= link_to 'Back', posts_path %>

    

Part 3 - Action Text Video Uploads

The final step is to add video uploads and make it fancy using VideoJS. We’ll need to update the Active Storage blob, create a HTML sanitizer, and import videojs. Code for all of this is in the blob below. Pun intended.

The way that the blob partial works is as follows: Every attached thing is a blob. We do a check on each blob to see if it’s an image or a video. If it’s an image, nothing changes. If it’s a video, add a video tag.


    # Update your show page for videoJS imports
    <link href="https://vjs.zencdn.net/7.8.3/video-js.css" rel="stylesheet" />
    <p id="notice"><%= notice %></p>
    
    <p>
      <strong>Title:</strong>
      <%= @post.title %>
    </p>
    
    <p>
      <strong>Views:</strong>
      <%= @post.views %>
    </p>
    
    <%= @post.body %>
    
    <%= link_to 'Edit', edit_post_path(@post) %> |
    <%= link_to 'Back', posts_path %>
    <script src="https://vjs.zencdn.net/7.8.3/video.js"></script>
    
    # Update your blob at app/views/active_storage/blobs/_blob.html.erb
    
    <figure class="attachment attachment--<%= blob.representable? ? "preview" : "file" %> attachment--<%= blob.filename.extension %>">
      <% if blob.image? %>
        <%= image_tag blob.representation(resize_to_limit: local_assigns[:in_gallery] ? [ 800, 600 ] : [ 1024, 768 ]) %>
      <% end %>
      <% if blob.video? %>
        <%= video_tag url_for(blob.attachable),
        preload: "auto",
        controls: "controls",
        width: "640",
        height: "360" %>
      <% end %>
    
      <figcaption class="attachment__caption">
        <% if caption = blob.try(:caption) %>
          <%= caption %>
        <% else %>
          <span class="attachment__name"><%= blob.filename %></span>
          <span class="attachment__size"><%= number_to_human_size blob.byte_size %></span>
        <% end %>
      </figcaption>
    </figure>
    
    # Create your html_sanitization.rb file under config/initializers
    
    Rails::Html::WhiteListSanitizer.allowed_tags << "video"
    Rails::Html::WhiteListSanitizer.allowed_tags << "source"
    Rails::Html::WhiteListSanitizer.allowed_attributes << "controls"

    

Conclusion

And there you have it! Video uploads inside of Action Text blog posts using Active Storage and VideoJS! I know this was a shorter tutorial than normal–usually the 20in20 stuff takes ages. But I needed to get back into the swing of things and people kept asking for this. Hopefully this tutorial helped!

Now if you’ll excuse me, I have work at 5 AM and it’s 1:30 AM. The life of a software developer would be a lot easier if we’d all stop trying to overachieve. Ah well, I wouldn’t trade it for the world. Happy coding, everyone!

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.