Sử dụng Active Storage trong một ứng dụng rails thuần túy khá đơn giản, nhưng khi chúng ta chuyển sang API Rails với một giao diện người dùng tách rời (chẳng hạn như ứng dụng React), nó sẽ trở lên khó khăn hơn một chút. Có rất nhiều bài viết, blog nổi bật xung quanh Active Storage trong một ứng dụng rails thuần túy hoặc cách sử dụng Active storage trên front-end tách rời. Do đó, bài viết này sẽ cố gắng hướng dẫn ngắn gọn, toàn diện để thiết lập Active Storage ở back-end và gửi dữ liệu từ front-end tách rời mà Active Storage có thể đọc được.
Với back-end
Cài đặt Active Storage bằng dòng lệnh:
1 2 | rails active_storage:install |
Chạy lệnh trên sẽ tạo các file migration tạo ra bảng active_storage_blobs và active_storage_attachments. Để biết thêm chi tiết về những gì các bảng này đang làm, vui lòng đọc tài liệu của Rails về Active Storage. Chạy các file migrations trên và các bảng sẽ xuất hiện trong schema của bạn.
Bây giờ chúng ta thực hiện kết nối các bảng này với các model mà chứa các tệp tải lên. Điều này được thực hiện thuận tiện thông qua các phương thức Active Storage tích hợp sẵn has_one_attached hoặc has_many_attached tùy vào đối tượng có một hoặc nhiều tệp đính kèm. Các phương thức này tương tự như việc thiết lập một cột khác trong bảng của đối tượng, ngoại trừ nó sẽ được lưu trong các bảng Active Storage thay vì bảng của đối tượng. Giả sử chúng ta có model User:
1 2 3 4 | <span class="token keyword">class</span> <span class="token class-name">User</span> <span class="token operator"><</span> <span class="token constant">ApplicationRecord</span> has_one_attached <span class="token symbol">:photo</span> <span class="token keyword">end</span> |
Đối với controller, như đã đề cập trước đó, các tệp Active Storage được gắn vào trong một đối tượng có thể được coi là một thuộc tính khác của đối tượng đó. Do đó bạn chỉ cần truyền các key/value vào strong params tương tự như với bất kỳ thuộc tính bình thường nào khác, phần còn lại Active Storage lo hết 
Với front-end
Front-end có thể khó khăn hơn 1 chút. Có một vài điểm mà bạn nên biết khi gửi dữ liệu của tệp tới back-end. Trước hết, giả sử bạn có một form (trong react hoặc vanilla JavaScript), form này phải có thẻ input với type='file' để người dùng có khả năng tải lên một tập tin từ máy cục bộ của họ. Thẻ input sẽ có dạng như sau:
1 2 | <Input type='file' name='photo'/> |
Một điều quan trọng cần chú ý là, trong ví dụ trước đó, chúng ta đã xác định name là photo. Với điều này, chi tiết quan trọng đầu tiên cần lưu ý là để truy cập giá trị của trường nhập tệp bạn phải sử dụng .files[0] thay vì .value. Với .value sẽ trả về một đường dẫn giả, không hữu ích. Với .files[0] sẽ trả về một tập hợp thông tin trên tệp đã tải lên, dữ liệu cần thiết. Thông tin này sẽ trở nên hữu ích khi chúng ta nói về bước quan trọng nhất của quy trình này: FormData
Thông thường, chúng ta sẽ gửi dữ liệu của form đến back-end thông qua một đối tượng của các cặp key/value, JSON.stringifying, và gửi chúng qua phần body của request. Tuy nhiên, nó không đơn giản như thế này khi chúng ta làm việc với các tệp vì chúng không thể chuyển đổi thành chuỗi hoặc được định dạng cho JSON. Do đó, thay vì gửi nó dưới dạng JSON, chúng ta gửi nó dưới dạng FormData.
Nếu thứ duy nhất bạn đang gửi trong form là tệp, thì việc sử dụng FormData có thể đơn giản như new FormData(formObj) trong đó ‘formObj’ là thành phần của form được chọn. Tuy nhiên, nếu bạn đang gửi thông tin khác cùng với tệp, chẳng hạn như tên người dùng (string), thì bạn có thể sử dụng phương thức append như sau:
1 2 3 4 5 | const data = new FormData() Object.keys(formObj).foreach((key,value) => { data.append((key, formObj[key]) } |
Điều này về cơ bản được lặp lại thông qua một ‘formObj’ với các cặp khóa và giá trị của các đầu vào. Cuối cùng đối tượng FormData sẽ sẵn sàng được gửi đến back-end. Nhưng chờ đã, nó vẫn không hoạt động! Bước cuối cùng cần thiết là đảm bảo rằng các headers không chứa 'application/json‘ vì chúng ta không gửi JSON (‘multipart/form-data’). Bây giờ , back-end của bạn sẽ có thể nhận dữ liệu tệp, attach nó vào đối tượng mới tạo hoặc cập nhật và bạn sẽ thấy tệp xuất hiện bất cứ nơi nào bạn đặt bộ nhớ của mình.
Nếu bạn đang tự hỏi làm thế nào để hiện thị, nhận hoặc gửi đến giao diện người dùng, bạn có thể thêm đoạn mã sau trong trình Serializer để trỏ đến vị trí tệp trong back-end:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">class</span> <span class="token class-name">UserSerializer</span> <span class="token operator"><</span> <span class="token constant">ActiveModel</span><span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token constant">Serializer</span> include <span class="token constant">Rails</span><span class="token punctuation">.</span>application<span class="token punctuation">.</span>routes<span class="token punctuation">.</span>url_helpers attributes <span class="token symbol">:photo</span> <span class="token keyword">def</span> photo <span class="token function">rails_blob_path</span><span class="token punctuation">(</span>object<span class="token punctuation">.</span>photo<span class="token punctuation">,</span> only_path<span class="token punctuation">:</span> <span class="token keyword">true</span><span class="token punctuation">)</span> <span class="token keyword">if</span> object<span class="token punctuation">.</span>photo<span class="token punctuation">.</span>attached<span class="token operator">?</span> <span class="token keyword">end</span> <span class="token keyword">end</span> |
Cảm ơn bạn đã đọc bài viết dài dòng của mình , hi vọng nó sẽ giúp bạn giải quyết mọi vấn đề với Active Storage trong Rails API.
Nguồn tham khảo
https://medium.com/swlh/active-storage-with-rails-api-23d6a72ed3f2