webpacker管理のJavaScriptファイルを実行して、画像プレビュー機能を実装したい。

Question

目標

webpacker管理のJavaScriptファイルを実行して、画像プレビュー機能を実装したい。

状況

Ruby on Rails6を使用し、画像投稿画面での投稿前のプレビュー機能を実装中です。
プレビュー処理の実現にはJavaScriptを使用しています。

課題

slimファイルに直接JavaScript処理を記述すれば
JavaScriptが実行され画像プレビュー可能です。
しかしJavaScript処理をslimから分離し、webpackerでJSファイルにて管理し
呼び出そうとするとブラウザの「Console」にエラーが出力され画像プレビューが出来ません。

webpackerでの設定の仕方なのか、slim側の呼び出し方が悪いのか検討がついておりません。
ご存知の方がいらっしゃいましたら、ご教授お願いしてもよろしいでしょうか？

JavaScript実行時のブラウザ「Console」エラーメッセージ

Uncaught ReferenceError: previewFileWithId is not defined
at HTMLInputElement.onchange (new?authenticity_tok...testd&commit=展示する:2)
onchange	@	new?authenticity_tok…testd&commit=展示する:2

実施環境

• macOS Catalina(v10.15.7)
• Ruby (v2.7.1)
• Ruby on Rails(v6.0.3.3)
• webpacker (v5.2.1)

プレビュー処理に関わるソースの格納ディレクトリ

app
  ├─ javascript
    ├─ packs
      ├─ application.js     ・・・webpackerのエントリーポイントファイル
    ├─ javascripts
      ├─ preview.js         ・・・プレビュー処理のJavaScriptファイル
  ├─ views
    ├─ layouts
       ├─ images.html.slim  ・・・画像投稿画面のヘッダー箇所。webpackerを読み込んでいる
    ├─ images
       ├─ new.html.slim     ・・・画像投稿画面のフォーム箇所。プレビュー処理のJavaScriptを呼び出している
bin
.
.
.

application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import 'bootstrap'
import '@fortawesome/fontawesome-free/js/all'
// javascriptモジュール類の読み込み設定
import '../javascripts/preview'
// stylesheets類の読み込み設定
import '../stylesheets/application'
// 画像の読み込み設定
const images = require.context('../images', true)

preview.js

function previewFileWithId(id) {
  const target = this.event.target;
  const file = target.files[0];
  const reader  = new FileReader();
  reader.onloadend = function () {
  preview.src = reader.result;
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = '';
 }
} 

images.html.slim

doctype html
html
  head
    title
      | MuscleMuseum
    = csrf_meta_tags
    = csp_meta_tag
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    = stylesheet_pack_tag 'application'
  body
    header
      nav class="navbar navbar-dark bg-dark mb-2"
        - if user_signed_in?
          = link_to 'ログアウト', destroy_user_session_path, method: :delete
          = link_to '画像を展示する', new_image_path
          = link_to 'マイページ', user_path(id: current_user.id)
          = link_to '編集', edit_user_registration_path
        - else
          = link_to 'MUSCLE MUSEUM', home_index_path
          = link_to '新規登録', new_user_registration_path
          = link_to 'ログイン', new_user_session_path
    p.notice
      = notice
    p.alert
      = alert
    = yield

new.html.slim

h2
  = form_with model: @image, local: true do |f|
    - if @image.image?
      = f.label :image
      = f.file_field :image, onchange: 'previewFileWithId(preview)', accept: 'image/jpeg, image/gif, image/png'
      = image_tag @image.image.url, id: 'preview', size: '300x300', class: 'image-thumbnail'
    - else
      = f.label :image
      = f.file_field :image, onchange: 'previewFileWithId(preview)', accept: 'image/jpeg, image/gif, image/png'
      = image_pack_tag 'sample.png', id: 'preview', size: '300x300', class: 'image-thumbnail'
    br
    = f.label :category
    = f.collection_select(:category_id, @category, :id, :category_name, disabled:true)
    br
    = f.label :title
    = f.text_field :title
    br
    = f.submit "展示する", class:"btn btn-primary"
    span class="picture"

Answer 1

自己解決致しました。
関数に「window.」を付与し、グローバル変数として定義する事により
処理が実行されました。

preview.js

window.previewFileWithId = function(id) {
  const target = this.event.target;
  const file = target.files[0];
  const reader  = new FileReader();
  reader.onloadend = function () {
  preview.src = reader.result;
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = '';
 }
} 

###参考リンク
JavaScript応用編 - windowオブジェクトとグローバルの実態について
Rails6でカスタムJavaScript関数を実行する方法