Active Storage trong Rails 5.2 qua ví dụ real-time

Active Storage là gì?

Active Storage là một quá trình giúp bạn tải các tệp lên lưu trữ đám mây như Amazon S3, Google Cloud Storage hoặc Microsoft Azure Storage và đính kèm các tệp đó vào đối tượng Active Record, nó có thể thay thế cho các gem trước đây chúng ta thường sử dụng như Paperclip, Carrierwave, Dragonfly.Nó sử dụng dịch vụ dựa trên disk service để phát triển và thử nghiệm.

Tính năng này chỉ có sẵn từ Rails 5.2. Vì vậy, nếu phiên bản của bạn thấp hơn "5.2", hãy nâng cấp lên phiên bản mới nhất bằng lệnh sau:

$ gem install rails --pre

Sau khi nâng cấp Rails, kiểm tra phiên bản Rails bằng lệnh bên dưới.

$ rails -v

Nếu phiên bản Rails của bạn là từ 5.2 trở lên thì hãy khởi động ứng dụng:

$ rails s

Sau đó, nó có thể trông như thế này:

Cài đặt cấu hình

Sau khi nâng cấp ứng dụng rails của bạn thành rails, 5.2 rồi chạy lệnh sau để cài đặt bộ nhớ hoạt động.

$ rails active_storage:install

Sau đó, nó sẽ tạo một tệp migration. Mỗi lần, bạn có thể chạy migration :

$ rails db:migrate

Khi bạn chạy lệnh, nó sẽ tạo hai bảng trong cơ sở dữ liệu của bạn có tên là active_st Storage_blobsactive_st Storage_attachements . Nó sẽ trông như dưới đây:

Declaring Disk Services

Declare các dịch vụ active storage trong config/storage.yml. Đối với mỗi dịch vụ, ứng dụng của bạn sử dụng tên và cấu hình cần thiết. Ví dụ: Bạn có thể thấy ba dịch vụ có tên như local, test và amazon như bên dưới và bạn có thể khai báo dịch vụ Disk tại đây.

test:
service: Disk
root: <%= Rails.root.join(“tmp/storage”) %>
local:
service: Disk
root: <%= Rails.root.join(“storage”) %>

Ta xác định trong môi trường về dịch vụ Active Storage mà chúng ta đang dự định sử dụng trong Rails.application.config.active_st Storage.service . Bởi vì mỗi môi trường sẽ được sử dụng các dịch vụ khác nhau. Và, ở đây sử Disk service cho Local & test. Tiếp theo, bạn có thể thêm dòng sau vào config/environments/development.rb để xác định dịch vụ của bạn.

# uploading files will be store in locally
config.active_storage.service = :local

Amazon S3 Service

Xác định cấu hình Amazon trong config/storage.yml . Khai báo các khóa sau để thiết lập dịch vụ Amazon s3.

amazon:
service: S3
access_key_id: “ “
secret_access_key: “ ”
region: “ ”
bucket: “ ”

Thêm gem "aws-sdk-s3" vào Gemfile.

gem "aws-sdk-s3", require: false

Bạn có thể sử dụng các dịch vụ khác nhau như Microsoft Azure và lưu trữ Google Cloud cho production environment. Ngoài ra, bất kể dịch vụ bạn đang sử dụng là gì, bạn phải khai báo các cấu hình trong tệp config/archive.yml . Cũng đừng quên đề cập đến config.active_storage.service trong config/environments/ production.rb . Bây giờ cho môi trường sản xuất, bạn có thể thêm dòng dưới đây vào config/environments/ production.rb để giới thiệu dịch vụ Amazon s3.

config.active_storage.service = :amazon

Cách sử dụng Active Storage trong ứng dụng

Attach Files To Records

mỗi bản ghi có một association tập tin tải lên. Vì vậy, để đặt một đến một mối quan hệ ánh xạ, bạn có thể sử dụng bên dưới từ khóa has_one_attached.

Ví dụ, bạn có thể xem đoạn mã dưới đây để lưu ý cách tôi đã sử dụng nó trong mã của mình.

Với has_one_attached:

  • Trong model:
has_one_attached :image

Lưu ý: Không cần tạo biến hình ảnh trong bảng Article . Nó sẽ sử dụng bảng ActiveStorage::Blob và ActiveStorage::Attachment để lưu trữ dữ liệu.

  • Trong controller : Chúng ta phải cho phép biến image cùng với các biến article Sau khi cấp cấp quyền biến image, tạo các action:
class ArticlesController < ApplicationController
    def create
        @article = Article.new(article_params)
        # @article.images.attach(params[:article][:images])
        respond_to do |format|
            if @article.save
            format.html { redirect_to @article, notice: 'Article was successfully created.' }
            # format.json { render :show, status: :created, location: @article }
            else
            format.html { render :new }
            # format.json { render json: @article.errors, status: :unprocessable_entity }
            end
        end
    end

    private
    def article_params
        params.require(:article).permit(:title, :image)
    end
end

Nếu bạn muốn đính kèm hình ảnh mới trên các bài viết hiện có thì hãy gọi image.attach để hoàn thành nó.

@article.image.attach(params[:image])

Và để kiểm tra xem hình ảnh được đính kèm trên bài viết hay không.

@article.image.attached?

Trong view:

<%= form.file_field :image %>

  • Kết quả:

Bây giờ kết quả sẽ như thế này bên dưới màn hình có hình ảnh đính kèm cho bài viết.

Chúng ta có thể thấy trong phần backend cách hình ảnh được lưu trữ trong bảng Active Storage.

Trong phần backend, cách tìm nạp hình ảnh từ các bảng ActiveStorage, Xem ảnh chụp màn hình bên dưới

cuối cùng, đây là hình ảnh được tải lên sẽ trông như thế nào trên trình duyệt.

Với has_many_attached:

Các bộ has_many_attached cho một đến nhiều mối quan hệ liên kết. Nói ngắn gọn hơn, nó giống như một bản ghi có thể có nhiều tệp tải lên hơn. Ví dụ: Bạn phải add như,

  • Trong model:
has_many_attached :images

Trong controller : Chúng ta phải cho phép biến image cùng với các biến article

def create
       @article = Article.create!(article_params)
        respond_to do |format|
            if @article.save
            format.html { redirect_to @article, notice: 'Article was successfully created.' }
            else
            format.html { render :new }
            end
        end
    end

    private
    def article_params
        params.require(:article).permit(:title, :image[])
    end
end

Gọi images.attach to add messages mới cho bài viết đã có.

@article.images.attach(params[:images])

Ngoài ra, để kiểm tra hình ảnh bài viết có được đính kèm hay không.

@article.image.attached?
  • Trong view:
<%= form.file_field :images, multiple: true%>

Xem ảnh chụp màn hình sau để tạo bài viết có hai hoặc nhiều hình ảnh,

Chúng ta có thể thấy trong phần backend cách hình ảnh được lưu trữ trong bảng Active Storage.

Trên phần backend cách tìm nạp hình ảnh từ các bảng ActiveStorage, như hình:

Hiển thị hình ảnh đã tải lên trong trình duyệt:

Chuyển đổi hình ảnh

Để Kích hoạt Variant, ta phải add gem image_processing vào Gemfile

gem "image_processing", "~> 1.2"

Sau khi thêm gem and bundle install, chúng ta sử dụng một variant trong view như:

<%= image_tag image.variant(resize: "100x100") %>

Để sử dụng bộ xử lý vips, bạn có thể thêm dòng sau vào config/application.rb

config.active_storage.variant_processor = :vips

Downloading Images

Thêm dòng sau để tải hình ảnh,

<%= link_to 'Download', image, download: image %>

Chúng ta có thể thấy hình ảnh đang được tải xuống từ các bảng Active Storage tại đây.

Xóa hình ảnh

  • Trong view:
<%= link_to 'Remove', delete_image_article_path(image), method: :delete, data: { confirm: 'Are you sure?' }%>
  • Trong controller:
def delete_image
    @image = ActiveStorage::Attachment.find(params[:id])
    @image.purge
    redirect_to articles_path
end

Ví dụ, tôi đã nhấp vào Xóa liên kết, xem bây giờ nó đang yêu cầu xác nhận để xóa hình ảnh.

Sau khi xác nhận để xóa hình ảnh, bạn đang thấy quá trình phụ trợ làm thế nào hình ảnh được lấy từ bảng bằng id hình ảnh và bị xóa.

Kết quả cuối cùng sau khi xóa hình ảnh,

Tổng Kết

Chúng ta gần như đã hoàn thành với Active Storage. Bây giờ hãy khám phá khả năng khác của việc sử dụng Active Storage có thể tiết kiệm thời gian của bạn từ việc tạo các công việc bổ sung như tạo bảng, trường hoặc duy trì lưu trữ. Active Storage hoàn toàn có thể quản lý và duy trì các tệp đã tải lên của bạn.

Hy vọng bài đăng này giúp bạn bắt đầu với Active Storage trong Rails. Hy vọng việc làm quen với gem mới này sẽ suôn sẻ với mọi người 😄

Nguồn tham khảo: https://www.agiratech.com/active-storage-in-rails-5-2/