Bootstrap 4: bs-custom-file-input: ドラッグ＆ドロップ時のファイルの限定

Question

HTMLフォームを使ったファイルのアップロードで、以下のようにinputタグを書いてアップロード出来ています。
拡張子が.pdfまたは.PDFのファイルのみ許すとし、必須としています。

<input type="file" name="file" accept=".pdf, .PDF" required>

以下の点で不満がありました。

• 他のUI要素はBootstrap 4を使って派手派手にしているのに、少し見た目が寂しい
• ドラッグ＆ドロップに対応していない

そこで以下のように変更しました。

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" name="file" accept=".pdf, .PDF" required>
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

・・・（中略）・・・

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js"></script>
<script>
  bsCustomFileInput.init();
</script>
</body>

以下のブログを参考にしました。

https://blog1.mammb.com/entry/2019/12/11/090000

以下の点で改善しました。

• 見た目が他と統一感が取れた
• ドラッグ＆ドロップに対応した

しかし、以下の点で不満があります。

• ドラッグ＆ドロップ時にinputタグのaccept要素が効かない。[参照...]ボタンを使うとPDFファイルのみが表示されるが、ドラッグ＆ドロップでは何のファイルでも表示されてしまう。

GitHubを見ると、おそらくbsCustomFileInput.init()メソッドに何らかの引数を渡せばできると思いますが、やり方が分かりません。
https://github.com/Johann-S/bs-custom-file-input

ということで、質問は

• ドラッグ＆ドロップでファイルをPDFのみに限定することは出来るか
• できなければ、ドラッグ＆ドロップを禁止にできるか

以上です。
よろしくお願いいたします。

Answer 1

bs-custom-file-inputではサポートしていないので、あまりやりたくなかったんですがJavaScriptで解決しました。。

      <input type="file" class="custom-file-input" id="inputGroupFile01" name="file" accept=".pdf, .PDF"
             onchange="fileCheck()"
             required>

  function fileCheck() {
    var e = document.getElementById('inputGroupFile01');
    var v = e.value;
    ext = v.slice (-4);
    if (ext != '.pdf' && ext != '.PDF') {
      alert (v + ' is not a PDF');
      e.value = '';
    }
}

もっとエレガントな回答があれば引き続きご教示ください。

Answer 2

そのような Issue が挙がっているようです。

Hi @Leenshady, it's not the purpose of this plugin and as @jessycormier said it's not a good practice to do that only on the front side.

file type filtering · Issue #41 · Johann-S/bs-custom-file-input · GitHub

とのことですので、このライブラリではできなさそうです。

---

コメントを受けて追記

コメントにも書きましたが、見た目だけの問題であれば、Bootstrap5 のフォームコントロールだけコンパイルして使ってみるのもいいかもしれません。

4の上から5のフォームコントロールを上書きしたサンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/g7t96o3r/

Comments

[query1000]

ありがとうございます。file typeによるフィルタリングは仕様で出来ないということですね。
となるとdrag&dropを抑制したいです。
自分でIssueを挙げてみましたが、やり方がおわかりの方がいらっしゃればご教示いただけると幸いです。
https://github.com/Johann-S/bs-custom-file-input/issues/104

[Lhankor_Mhy]

見た目だけの問題であれば、Bootstrap5 の フォームコントロールはそれなりにいいと思いますので、その部分だけコンパイルして使うのもアリなのかもしれませんね。上手く整合するのかわかりませんが。

https://getbootstrap.com/docs/5.0/forms/form-control/#file-input
https://github.com/twbs/bootstrap/blob/main/scss/forms/_form-control.scss

[Lhankor_Mhy]

変数の違いで死んじゃうか……

[Lhankor_Mhy]

これの通りにモジュールをコンパイルすれば動作しそうですね。
https://getbootstrap.jp/docs/5.0/customize/sass/

回答に追記しておきます。

[query1000]

ありがとうございます。
こちらのBootstrap5のFile Inputは、4のと同じような見た目ですが、設定を変えれば、ドラッグ＆ドロップされたファイルタイプのチェック（こちらの方が望ましい）や、ドラッグ＆ドロップ自体の禁止が出来るのでしょうか。

[Lhankor_Mhy]

ようやく問題を把握できました。
Bootstrap とか関係なく、ブラウザの挙動としてのドロップを禁止したいということなのですね。
そうすると、dropのイベントを拾ってキャンセルしてしまえばいいような気がします。

[query1000]

質問の仕方が悪くてスミマセン！
そうなんです。特定のファイル以外を入れたくないので、accept属性で調整していたが、dropだとそれをすり抜けてしまうのが問題だったんですよね。
なんとなく今の（目的の拡張子以外がドロップされるとキャンセルされる）JavaScriptで目的はかなってしまっているので、これでよしとします。
でもGitHubのIssueを見つけてくださって助かりました。

[Lhankor_Mhy]

ご解決されて何よりです。
飲み込みが悪くお役に立てずすみませんでした。