jsをhtmlベタ書きから外部ファイルに移動するとUncaught TypeError: fileInput.fileupload is not a function

Question

rails6.1.0

heroku公式に、フロントエンドから直接S3へアップロードするjsのサンプルがあります。
jsはhtmlに直接ベタ書きになっています。

Rails での S3 への画像の直接アップロード

このjsを外部に切り出して利用しようと試みましたが、読み込みに失敗しました。

コンソール

ncaught TypeError: fileInput.fileupload is not a function
    at HTMLInputElement.<anonymous> (direct_upload.js:11)
    at Function.each (jquery.js:304)
    at jQuery.fn.init.each (jquery.js:102)
    at HTMLDocument.<anonymous> (direct_upload.js:3)
    at HTMLDocument.dispatch (jquery.js:4589)
    at HTMLDocument.elemData.handle (jquery.js:4268)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

外部ファイルに切り出したjs
app\javascript\packs\users\direct_upload.js

$(document).on('turbolinks:load', function(){
  
  $('.directUpload').find("input:file").each(function(i, elem) {
    var fileInput    = $(elem);
    console.log(fileInput);
    var form         = $(fileInput.parents('form:first'));
    var submitButton = form.find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    fileInput.after(barContainer);
    fileInput.fileupload({
      fileInput:       fileInput,
      url:             '<%= @s3_direct_post.url %>',
      type:            'POST',
      autoUpload:       true,
      formData:         '<%= @s3_direct_post.fields.to_json.html_safe %>',
      paramName:        'file',
      dataType:         'XML',
      replaceFileInput: false,
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        progressBar.css('width', progress + '%')
      },
      start: function (e) {
        submitButton.prop('disabled', true);

        progressBar.
          css('background', 'green').
          css('display', 'block').
          css('width', '0%').
          text("Loading...");
      },
      done: function(e, data) {
        submitButton.prop('disabled', false);
        progressBar.text("Uploading done");

        // extract key and generate URL from response
        var key   = $(data.jqXHR.responseXML).find("Key").text();
        var url   = '<%= @s3_direct_post.url %>/' + key;
        
        
        // create hidden field
        var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
        form.append(input);
      },
      fail: function(e, data) {
        submitButton.prop('disabled', false);

        progressBar.
          css("background", "red").
          text("Failed");
      }
    });
  });

});

jsを呼んでるビュー側
app\views\users\edit.html.erb

<%= javascript_pack_tag 'users/direct_upload' %>

エラーメッセージから、jQueryUIプラグインが読めてないっぽいですが、
htmlベタ書きだと正常に動作してます。

ちなみにjQueryUIは以下のようにインストールしました。何か関係してるでしょうか？

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// jQuery追加ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery', // jquery/src/jquery から jqeury に変更
    jQuery: 'jquery' // jquery/src/jquery から jqeury に変更
  })
)

const aliasConfig = {
  'jquery': 'jquery-ui/external/jquery/jquery.js',
}
environment.config.set('resolve.alias', aliasConfig);
// jQuery追加ここまで

module.exports = environment

どうすれば外部ファイルを利用できるようになるでしょうか？
分かる方教えていただけると幸いです。
宜しくお願い致します。

デバッグした内容を追加

javascriptの４行目で

console.log(fileInput);

とすると、

jQuery.fn.init [input#target.upload-img__input, context: input#target.upload-img__input]

は出力できますが、

console.log(fileInput.fileupload);

とすると、

undefined

となりました。
fileupload()を認識できていないようです。

Answer 1

jsプラグインの読み込みができていないように思われます。
jQuery, jQuery UI, jQuery-File-Uploadの3つのプラグインの読み込みが必要ですが、jqueryしか読み込めていないのではないでしょうか。
jQuery UI, jQuery-File-Uploadの読み込みについては一応クライアント側のコード項に書かれているようです。

Comments

[pecchan]

有難う御座います。
仰るとおり、プラグインだけが読み込まれてませんでした。
その読み込み方に苦戦しましたが、以下のようにするといけました。
require("blueimp-file-upload");

※参考先は、どちらかと言うとrails5以前の方法