Mulai April 2020, bandithijo.com akan menggunakan GitHub subdomain menjadi bandithijo.github.io. Penggunaan domain .com tidak sejalan dengan cara pandang saya terhadap sebuah blog, dimana blog harus bisa tetap hidup tanpa saya. Terima kasih (^_^) (bandithijo, 2020/03/25) ●

بسم الله الرحمن الرحيم

Requirements

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.

gambar_1

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.

gambar_2

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
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.

gambar_3

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

Penulis

bandithijo

BanditHijo adalah nama pena saya – meminjam istilah keren dari para penulis. Teman-teman menyebut saya sebagai GNU/Linux Enthusiast. Saya memang gemar mengutak-atik sistem operasi ini. Bukan karena hobi tapi karena saya perlu untuk menggunakannya. Hehe.

- Rizqi Nur Assyaufi

Berlangganan via Email

Jangan sampai ketinggalan kabar dan info terbaru mengenai BanditHijo (R)-Chive.
Ayo bergabung!
0417f35786b88289ad1d75e284f363ef4d8a9d97