Rails 5 Bootstrap 4 Simple_Form Предварительный просмотр изображения перед загрузкой файла

Question

Я создаю приложение на Rails 5, у меня есть модель продукта, и в новой форме продукта я хочу получить тюк для предварительного просмотра изображения, которое будет загружено.

У меня есть поля и некоторые JS, которые я получил из учебника, но он не работает, и я не вижу ошибок в консоли?

Я не самый сильный с JS, так что это может быть что-то маленькое, что я пропускаю.

Любая помощь будет принята с благодарностью!

Мои поля формы (ввод и просмотр формы)

<%= image_tag("placeholder.png", :id => "img_prev", :class => "preview") %>
<%= f.file_field :image, :class => 'photo_upload', on: {:change => "readURL(this);"} %>

My JS

  // Start Image Preview
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#img_prev')
          .attr('src', e.target.result)
          .width(150)
          .height(200);
      };

      reader.readAsDataURL(input.files[0]);
    }
  }