Một số vấn đề với khi upload file ảnh với rails + carrierwave.

Tram Ho

Khi làm chức năng upload file ở với gem carrierwave của rails, mình gặp phải 3 vấn đề nhỏ:

  • Làm sao để validate extension của file ở client side và server side?
  • Làm sao để preview được ảnh ngay sau khi chọn?
    Mình sẽ chia sẻ cách giải quyết của mình trong 2 vấn đề đó.

Tạo form

Đầu tiên nhớ là bạn đã install carrierwave:

Giả sử mình có một model Article với 2 trường title, thumbnail như sau:

Tạo routes, controllers và views cho form

Mình sẽ thêm 1 đoạn initializers để add errors_message vào dưới mỗi field trong form:

Và ta có được một form như sau:

Validate extension của file

Bây giờ, để thực hiện validate extension của file , mình sẽ chia sẻ 2 cách:

  • Validate client side: Sử dụng javascript.
  • Validate model level : Sử dụng validate ở class uploader của carrierwave

Để validate ở client side ta bắt sự kiện onchange ở file_field như sau:

Và thêm 1 đoạn javascript:

Và nó chạy như sau:

Nhưng với cách nói trên, khi browser tắt js, thì nó trở lên vô dụng. Vì vậy, mình thường thực hiện validate ở model level.
Carrierwave cung cấp cho bạn method extension_whitelist để validate extension trong class CarrierWave::Uploader::Base.

Thêm I18n cho message :

Và phần validation sẽ chạy như thế này:

Preview file ảnh ngay sau khi chọn

Để preview được ảnh ngay sau khi chọn file (mà chưa upload lên server) , đầu tiên mình sẽ thay đổi nút select file 1 chút:

Ảnh “default.png” các bạn tải tại đây và cho vào assets/images. Thêm 1 chút css:

Và ta được 1 cái field chọn ảnh như sau:

Ta sử dụng class FileReader của js để thực hiện chức năng preview ảnh:

Và việc chức năng preview ảnh đã hoàn thành:

Mình đã viết hàm handleprevew(input_tag, image) theo cách dễ sử dụng lại nhất. Bạn chỉ cần lấy được id của thẻ input[type="file"] và id của ảnh label của nó là được.

Bài viết của mình đến đây là kết thúc.


Refernces:

https://github.com/carrierwaveuploader/carrierwave/wiki/CarrierWave-and-multiple-databases
https://github.com/carrierwaveuploader/carrierwave/wiki/CarrierWave-and-multiple-databases

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo