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.

FILEapp/javascript/packs/application.js

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

1. getbootstrap.com/docs/4.6/components/input-group/
   Diakses tanggal: 2021/02/05

2. www.npmjs.com/package/bs-custom-file-input
   Diakses tanggal: 2021/02/05

Lisensi

Tulisan ini dilisensikan dengan :
Atribusi-NonKomersial-BerbagiSerupa 4.0 Internasional (CC BY-NC-SA 4.0)

Penulis

My journey kicks off from reading textbooks as a former Medical Student to digging bugs as a Software Engineer – a delightful rollercoaster of career twists. Embracing failure with the grace of a Cat avoiding water, I've seamlessly transitioned from Stethoscope to Keyboard. Armed with ability for learning and adapting faster than a Heart Beat, I'm on a mission to turn Code into a Product.

- Rizqi Nur Assyaufi