[Rails] Upload videos with Rails (ActiveStorage)

I am currently attending a programming school and have moved to the portfolio production phase. I wanted to make something like Instagram Stories that allows me to post short videos, but I was worried that there were fewer articles to upload videos than I expected, so I will write it so that I will not forget this time.

Reference site

-[Rails 5.2] How to use Active Storage -I made a video posting site using Active Storage

• https://stackoverflow.com/questions/50993367/active-storage-displaying-video-in-video-tag

Use Active Storage

Initially, I was thinking of implementing it using Carrierwave etc., but when I investigated it, it seems that file upload can be done with the standard function of Rails, so I will implement it here. I'm a beginner who knows ActiveStorage today, so please check other people's articles for details. I will leave the flow up to video posting. This is a quote from a reference site.

A function added in Rails 5.2 for uploading files. If you use this, you can easily create an image posting function etc. with a form. You can also easily upload files to cloud storage services such as Amazon S3, Google Cloud Storage, and Microsoft Azure Storage. In addition to cloud storage, you can also save files to your local disk.

Install Active Storage

$ rails active_storage:install
$ rails db:migrate

Two tables are created, ʻactive_storage_blobs and ʻactive_storage_attachments. These two will continue as they are.

Creating a model

This time, I will simply make a model called Video. I created title and ʻintroduction` in the column. I haven't created a column for the video itself here.

$ rails g resource video title:string introduction:text
$ rails db:migrate

This time, we will assume that you can post one video at a time. Write has_one_attached in the Video model.

/app/models/video.rb

class Video < ApplicationRecord
  has_one_attached :video
end

: video is the name of the file, and it seems that you can give it any name you like. (If you upload an image, such as : image)

Creating a controller

I will write it in the videos controller.

/app/controllers/videos_controller.rb

class VideosController < ApplicationController

  def new
    @video = Video.new
  end

  def create
    @video = Video.new(video_params)
    @video.create
    redirect_to @video
  end

  def show
    @video = Video.find(params[:id])
  end

  private

  def video_params
    params.require(:video).permit(:title, :introduction, :video)
  end
end

The Video model does not have a: video column, but this corresponds to has_one_attaches: video. This time it's a test to see if you can post a video, so only new create show is written.

Create view

Write the post form with new.

/app/views/videos/new.html.erb

<%= form_with model: @video, local: true do |form| %>
  <p>title</p><%= form.text_field :title %> <br>
  <p>introduction</p><%= form.text_area :introduction %> <br>
  <p>video</p><%= form.file_field :video %> <br>
  <%= form.submit %>
<% end %>

I think that the posting form was created like this. We will also create a show page.

/app/views/videos/show.html.erb

<% if @video.video.attached? %>
  <p><%= @video.title %></p> <br>
  <p><%= @video.introduction %></p>
  <%= video_tag rails_blob_path(@video.video) %>
<% end %>

You can check if @video has video with .attached?.

If you simply write <% = video_tag @ video.video%>, it seems that you are looking for data in the direction of / app / assets /, and you will get an error in the asset pipeline. Let's write rails_blob_path.

It is now displayed. The video will not play if it is left as it is. Write <% = video_tag%> in <video>.

/app/views/videos/show.html.erb

<% if @video.video.attached? %>
  <p><%= @video.title %></p> <br>
  <p><%= @video.introduction %></p>
  <video src="<%= rails_blob_path(@video.video) %>" type="video/mp4" controls></video>
<% end %>

controls automatically creates an interface that makes the video easier to use. Now you can upload, display, and even play the video.

I'm not actually making columns, so I'm about to list them, but will it work? I will post if something happens again.

important point

Since this time we are creating a portfolio, it is assumed that the video will be free material and short, about a few seconds, considering the deployment. Long videos are large in size, so if you try to do it locally or on the network, it will be great. (School people were warned to keep it to the minimum necessary) There is a usage fee, but there seems to be a method such as using AWS S3 (although I am not familiar with this area yet) I hope that if you are a beginner like yourself, you will think that there is such a method.