Prerequisite
ruby 2.7.2
rails 6.1.1
bootstrap 4.6
bs-custom-file-input 1.3.4
Latar Belakang Masalah
Catatan kali ini, saya akan membicarakan developing dari sisi front-dend. Yaitu memasang component Custom File Input Bootstrap 4 pada Rails 6.
Component ini, dapat teman-teman lihat di sini, Components > Custom file input.
Seperti yang kita tahu, Rails 6 secara default menggunakan Webpacker untuk mem-packaging dan mem-bundling aset-aset Javascript. Sehingga cara mengkonfigurasi Javascript library tentu akan sedikit berbeda dengan saat kita menggunakan Rails 5 yang menggunakan Sprockets.
Permasalahan
Component custom file input milik Bootstrap tersebut memerlukan Javascript library yang berama bs-custom-file-input.
Kalau kita belum memasang library tersebut, maka akan seperti di bawah ini.
Dapat dilihat, nama file yang kita pilih, tidak tampil di input field.
Nah, ini karena bs-custom-file-input belum dipasang.
Instalasi
Pasang bs-custom-file-input library
Saya memilih menggunakan yarn untuk memasang library ini.
$ yarn add bs-custom-file-input
Definisikan pada pack
Kita perlu memanggil library bs-custom-file-input ke dalam pack yang terletak pada app/javascript/packs/application.js.
app/javascript/packs/application.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap'
import bsCustomFileInput from 'bs-custom-file-input'
$(document).on('turbolinks:load', function() {
// for bs-custom-file-input
bsCustomFileInput.init()
})
Baris ke-7, adalah proses import dari bs-custom-file-input library.
baris ke-12, adalah proses inisialisasi, untuk menjalankan library.
Kelar!
Hanya seperti ini saja.
Sekarang, seharusnya sudah berhasil memunculkan nama file pada input field.
Mantap!
Pesan Penulis
Ngomong-ngomong, kalau masih kesulitan mengintegrasikan Bootstrap 4 dengan Rails 6, dapat membaca catatan saya di sini, Memasang Bootstrap 4 pada Rails 6 dengan Yarn.
Sepertinya, segini dulu yang dapat saya tuliskan.
Mudah-mudahan dapat bermanfaat.
Terima kasih.
(^_^)
Referensi
-
getbootstrap.com/docs/4.6/components/input-group/
Diakses tanggal: 2021/02/05 -
www.npmjs.com/package/bs-custom-file-input
Diakses tanggal: 2021/02/05
Lisensi

Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)
Penulis

BanditHijo adalah nama pena saya –meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Sistem operasi ini memberikan saya kebebasan untuk mengekspresikan ide-ide dalam membantu menyelesaikan pekerjaan saya sehari-hari.
- Rizqi Nur Assyaufi