Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ruby on Rails
Code

Meng-upload dengan Rails dan Carrierwave

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Ini adalah artikel lain dalam seri "Mengunggah dengan Rails". Hari ini kita akan bertemu Carrierwave salah satu solusi untuk file uploading paling populer untuk Rails. Saya menyukai Carrierwave karena mudah untuk digunakan, memiliki banyak fitur yang diluar dugaan, dan menyediakan lusinan artikel "how to" yang ditulis oleh anggota komunitas, jadi anda tidak akan bingung dalam menggunakan Carrierwave.

Dalam artikel ini, Anda akan belajar cara:

  • Mengintegrasikan Carrierwave ke aplikasi Rails anda
  • Menambahkan validasi
  • Mempertahankan file dari seluruh request
  • Menghapus file
  • Membuat thumbnail
  • Mengunggah file dari lokasi jarak jauh
  • Memperkenalkan cara uploading multiple file
  • Menambahkan dukungan untuk penyimpanan cloud

Source code dalam artikel ini tersedia di GitHub. Selamat membaca!

Peletakan Pondasi

Seperti biasanya, mari mulai dengan membuat aplikasi Rails yang baru:

Untuk demo kali ini saya akan menggunakan Rails 5.0.2. Harap dicatat bahwa Carrierwave 1 hanya mendukung Rails 4+ dan Ruby 2. Jika Anda masih menggunakan Rails 3, maka hubungkan dengan Carrierwave versi 0.11.

Untuk melihat bagaimana Carrierwave bekerja, kita akan membuat aplikasi blogging yang sangat sederhana dengan model Post tunggal. Aplikasi ini akan memiliki atribut utama sebagai berikut:

  • title (string)
  •  body (text)
  • image (string) — bagian ini akan berisi gambar (nama file gambar, tepatnya) yang akan dilampirkan pada post.

Generate dan jalankan perintah migrate:

Mengatur beberapa routes:

config/routes.rb

Lalu, buatlah sebuah basic controller.

posts_controller.rb

Sekarang, mari membuat index index view:

views/posts/index.html.erb

Parsial yang sesuai:

views/posts/_post.html.erb

Di sini saya menggunakan metode Rails truncate hanya untuk menampilkan 150 simbol pertama dari postingan. Sebelum kita membuat tampilan lain dan sebuah bentuk parsial, mari kita mengintegrasikan Carrierwave ke dalam aplikasi.

Integrasi Carrierwave

Masukkan gem baru ke dalam Gemfile:

Gemfile

Jalankan:

Carrierwave menyimpan konfigurasinya di dalam uploaders yang terdapat dalam model Anda. Untuk membuat uploader, gunakan perintah berikut:

Sekarang, di dalam app/uploaders, Anda akan menemukan file baru bernama image_uploader.rb. Perhatikan bahwa ini memiliki beberapa perintah dan contoh yang berguna, jadi Anda dapat menggunakannya untuk memulai app. Dalam demo ini kita akan menggunakan ActiveRecord, tetapi juga mendukung penggunaan Mongoid, Sequel, dan DataMapper.

Selanjutnya, kita perlu menyertakan atau mount uploader ini ke dalam model:

models/post.rb

Uploader sudah memiliki pengaturan default, tetapi setidaknya kita harus memilih di mana file yang diunggah akan disimpan. Untuk saat ini, mari gunakan penyimpanan file:

uploaders/image_uploader.rb

Secara default, file akan ditempatkan di dalam direktoripublic/uploads, ini adalah cara terbaik untuk mengeluarkannya dari version system control:

.gitignore

Anda juga dapat memodifikasi store_dir method di dalam uploader Anda agar dapat memilih beberapa lokasi lain.

Pada titik ini, kita dapat membuat tampilan baru dan sebuah formulir parsial untuk mulai mengunggah file:

views/posts/new.html.erb

views/posts/_form.html.erb

Perhatikan bahwa PostsController tidak perlu dimodifikasi karena kita sudah mengizinkan atribut image

Terakhir, mari membuat edit view:

views/posts/edit.html.erb

Nah! Anda dapat mem-boot server dan mencoba membuat sebuah postingan dengan gambar. Masalahnya adalah gambar ini tidak terlihat di mana pun, jadi mari kita lanjutkan ke bagian selanjutnya dan tambahkan show page!

Menampilkan Gambar

Sekarang, satu-satunya view yang belum kita buat adalahs show. Tambahkan source code ini sekarang:

views/posts/show.html.erb

Seperti yang Anda lihat, menampilkan attachment sangat mudah: semua yang perlu Anda lakukan adalah mengetikkan @post.image.urluntuk mengambil URL image. Untuk mendapatkan path ke file, gunakan metode current_path. Perhatikan bahwa Carrierwave juga menyediakan image? method bagi kita untuk memeriksa apakah attachment benar-benar ada ( image itu sendiri tidak akan pernah kembali dalam keadaan nil, bahkan jika file tersebut tidak ada).

Sekarang, setelah melakukan navigasi ke post, Anda akan melihat gambar, tetapi mungkin gambar tampak terlalu besar: karena kita tidak membatasi ukuran dimensinya. Tentu saja, kita dapat mengecilkan gambar dengan beberapa aturan CSS, tetapi jauh lebih baik untuk membuat thumbnail setelah file diunggah. Untuk membuatnya, bagaimanapun, membutuhkan beberapa langkah tambahan.

Membuat Thumbnail

Untuk memangkas dan memperbesar gambar, kita membutuhkan tool yang terpisah. Carrierwave memiliki dukungan yang mengejutkan untuk RMagick dan MiniMagick gem yang, pada gilirannya, digunakan untuk memanipulasi gambar dengan bantuan ImageMagick. ImageMagick adalah aplikasi open-source yang memungkinkan Anda untuk mengedit gambar yang ada dan menghasilkan yang baru, jadi sebelum melanjutkan Anda perlu download tool ini dan meng-install-nya. Selanjutnya, Anda bebas memilih salah satu dari dua gem itu. Saya selalu menggunakan MiniMagick, karena lebih mudah untuk menginstalnya dan memiliki dukungan yang lebih baik:

Gemfile

Jalankan:

Lalu, masukkan MiniMagick kedalam uploader:

uploaders/image_uploader.rb

Sekarang kita hanya perlu memperkenalkan version baru ke uploader yang sudah kita miliki sebelumnya. Konsep versions (atau styles) digunakan di banyak file yang mengunggah library; maksudnya adalah file tambahan berdasarkan lampiran asli akan dibuat, misalnya, dengan dimensi atau format yang berbeda. Memperkenalkan version baru yang disebut thumb:

uploaders/image_uploader.rb

Anda mungkin memiliki banyak version yang anda suka dan version dapat dibuat di atas version yang lain:

uploaders/image_uploader.rb

Jika anda sudah mengunggah beberapa gambar, mereka tidak akan memiliki thumbnail yang tersedia. Ini bukan masalah, karena anda dapat membuatnya kembali menggunakan konsol Rails:

Terakhir, tampilkan thumbnail anda dengan tautan ke gambar asli:

views/posts/show.html.erb

Boot servernya dan amati hasilnya!

Menambahkan validasi

Saat ini pengunggahan kita sudah berfungsi, tetapi kita tidak memvalidasi apa saja yang user masukan sama sekali, yang tentu saja buruk. Jika kita ingin bekerja hanya dengan gambar, mari kita whitelist .png, .jpg dan .gif extensions:

uploaders/image_uploader.rb

Anda juga dapat menambahkan pemeriksaan jenis konten dengan menuliskan metode content_type_whitelist:

uploaders/image_uploader.rb

Selain itu, sangat mungkin untuk melakukan blacklist terhadap beberapa jenis file, misalnya file yang dapat dieksekusi, dengan menggunakan metode content_type_blacklist.

Selain memvalidasi jenis dan ekstensi file, mari kita membuat file yang diunggah harus kurang dari 1 megabyte. Untuk melakukannya, kita akan membutuhkan tambahan gem yang mendukung validasi untuk ActiveModel:

Gemfile

Lalu, lakukan instalasi:

Sekarang perkenalkan validasi yang diinginkan (perhatikan bahwa saya juga menambahkan pemeriksaan untuk atribut title dan body):

models/post.rb

Hal berikutnya yang harus dilakukan adalah menambahkan I18n translation untuk error messages dari Carrierwave:

config/locales/en.yml

Saat ini, kita tidak menampilkan kesalahan validasi di mana saja, jadi mari buat shared partial:

views/shared/_errors.html.erb

Gunakan partial ini ke dalam form:

views/posts/_form.html.erb

Sekarang coba unggah beberapa file tidak valid dan amati hasilnya. Ini seharus berhasil, tetapi jika anda memilih file yang valid dan tidak mengisi judul atau badan, maka cek akan tetap gagal dan pesan error akan ditampilkan. Namun, file akan dihapus dan user harus memilih gambar lagi, hal ini sangat tidak nyaman. Untuk memperbaikinya, kita perlu menambahkan field lain ke form.

Mempertahankan File di Seluruh Request

Mempertahankan seluruh file di formulir redisplay is actually quite easy. All you need to do is add a new hidden field and permit it inside the controller:

views/shared/_form.html.erb

posts_controller.rb

Sekarang image_cache akan terisi secara otomatis dan gambar tidak akan hilang. Mungkin akan berguna untuk menampilkan thumbnail juga sehingga pengguna memahami gambar telah berhasil diproses sebelumnya:

views/shared/_form.html.erb

Menghapus Gambar

Fitur lain yang sangat umum adalah kemampuan untuk remove attached files saat mengedit records. Dengan Carrierwave, menerapkan fitur ini tidak menjadi masalah. Tambahkan checkbox baru ke form:

views/shared/_form.html.erb

Dan izinkan atribut remove_image:

posts_controller.rb

Nah itu dia! Untuk menghapus sebuah gambar secara manual, gunakan remove_image! method:

Meng-upload dari Lokasi Jarak Jauh

Carrierwave juga menyediakan fitur yang sangat keren: kemampuan untuk mengunggah file dari lokasi yang jauh hanya dengan URL mereka. Mari tambahkan kemampuan ini sekarang dengan menuliskan bidang baru dan mengizinkan atribut terkait:

views/shared/_form.html.erb

posts_controller.rb

Betapa kerennya itu? Anda tidak perlu melakukan perubahan sama sekali, dan Anda dapat segera menguji fitur ini!

Melakukan Beberapa Upload Sekaligus

Misalkan kita ingin postingan kita memiliki beberapa lampiran yang tersedia. Dengan pengaturan saat ini tidak mungkin, tapi untungnya, Carrierwave supports skenario seperti itu juga. Untuk mengimplementasikan fitur ini, Anda perlu menambahkan serialized field (untuk SQLite) atau JSON (untuk Postgres atau MySQL). Saya lebih memilih opsi yang terakhir, jadi mari kita beralih ke adaptor database baru sekarang. Hapus sqlite3 gem dari Gemfile dan tambahkan pg sebagai gantinya:

Gemfile

Lakukan instalasi:

Modifikasi konfigurasi database seperti dibawah ini:

config/database.yml

Membuat database Postgres sesuai, lalu generate dan terapkan migration:

Jika Anda lebih memilih untuk tetap menggunakan SQLite, ikuti petunjuk yang tercantum dalam dokumentasi Carrierwave.

Sekarang lakukakn mount uploader (perhatikan plural form!):

model/post.rb

Saya menggunakan uploader yang sama untuk attachment, tetapi tentu saja anda dapat membuat yang baru dengan konfigurasi yang berbeda.

Tambahkan multiple file field ke form anda:

views/shared/_form.html.erb

Selama attachments field akan berisi sebuah array, itu harus diizinkan dengan cara berikut:

posts_controller.rb

Terakhir, Anda dapat iterate ulang attachment postingan anda dan menampilkannya seperti biasa:

views/shared/show.html.erb

Perhatikan bahwa setiap attachment akan memiliki thumbnail seperti yang kita konfigurasikan di ImageUploader. Bagus!

Menggunakan Cloud Storage

Menggunakan file storage tidak selalu mudah dan / atau mungkin, misalnya, pada Heroku tidak mungkin menyimpan file kustom. Oleh karena itu Anda mungkin bertanya bagaimana cara memasangkan Carrierwave dengan cloud storage Amazon S3? Nah, itu tugas yang cukup mudah. Carrierwave bergantung pada gem fog-aws untuk menerapkan fitur ini:

Gemfile

Lakukan instalasi:

Mari kita buat penginisialisasi untuk Carrierwave dan konfigurasi cloud storage secara global:

config/initializers/carrierwave.rb

Ada beberapa opsi lain yang tersedia, yang dapat ditemukan di dokumentasi.

Saya menggunakan dotenv-rails gem untuk mengatur variabel lingkungan dengan cara yang aman, tetapi Anda dapat memilih opsi lain. Namun, pastikan bahwa S3 key pair Anda tidak tersedia untuk umum, karena jika tidak, siapa pun dapat mengunggah apa pun ke storage Anda!

Selanjutnya, ganti storage baris storage :file dengan:

uploaders/image_uploader.rb

Selain S3, Carrierwave mendukung uploads ke Google Storage dan Rackspace. Layanan ini juga mudah diatur.

Kesimpulan

Cukup untuk hari ini! Kami telah mencakup semua fitur utama Carrierwave, dan sekarang Anda dapat mulai menggunakannya dalam proyek Anda. Carrierwave memiliki beberapa opsi tambahan yang tersedia, jadi silahkan pelajari dokumentasi.

Jika Anda bingung, jangan ragu untuk memposting pertanyaan Anda. Juga, anda mungkin dapat mengakses Carrierwave's wiki, yang mengposting artikel "how to" yang berguna untuk menjawab banyak pertanyaan umum.

Jadi saya berterima kasih untuk tetap bersama saya, dan happy coding!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.