[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

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 %>

スクリーンショット 2020-09-02 14.26.29.png 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.

スクリーンショット 2020-09-02 14.34.49.png

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.

スクリーンショット 2020-09-02 14.46.28.png

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.

Recommended Posts

[Rails] Upload videos with Rails (ActiveStorage)
Upload multiple images easily with rails rails + carrierwave + cloudinary
[Ruby on Rails] Upload multiple images with refile
Rails deploy with Docker
[Rails 6] RuntimeError with $ rails s
Handle devise with Rails
[Rails] Learning with Rails tutorial
[Rails] Test with RSpec
[Rails] Development with MySQL
Supports multilingualization with Rails!
Double polymorphic with Rails
Introduced graph function with rails
[Rails] Express polymorphic with graphql-ruby
Try using view_component with rails
[Vue Rails] "Hello Vue!" Displayed with Vue + Rails
Japaneseize using i18n with Rails
iOS: File upload with SFTP
API creation with Rails + GraphQL
Preparation for developing with Rails
File upload with Spring Boot
Rails Active_storage -Simplify saving images-
Run Rails whenever with docker
[Docker] Rails 5.2 environment construction with docker
Use multiple databases with Rails 6.0
[Rails] Specify format with link_to
Login function implementation with rails
Post videos with Active Storage
[Docker] Use whenever with Docker + Rails
Rails + MySQL environment construction with Docker
Create portfolio with rails + postgres sql
[Rails] Push transmission with LINE Bot
[Rails] Make pagination compatible with Ajax
Implemented mail sending function with rails
[Rails] Creating a new project with rails new
Minimal Rails with reduced file generation
Create pagination function with Rails Kaminari
Build environment with vue.js + rails + docker
Eliminate Rails FatModel with value object
Recognize Rails projects with Intellij idea
[Grover] Generate PDF with Rails [2020 version]
Build Rails environment with Docker Compose
[Rails] Initial data creation with seed
Rails6 OmniAuth activestorage Get user image
Track Rails app errors with Sentry
[Environment construction with Docker] Rails 6 & MySQL 8
Connect to Rails server with iPhone
How to get along with Rails
Create My Page with Rails devise
Introducing React to Rails with react-rails
Initial data input with [Rails] seed_fu!
Timeless search with Rails + JavaScript (jQuery)
Let's unit test with [rails] Rspec!