カテゴリー
コンピューター

Vue.js 3 で Dropzone をラップした SFC その 4 。ファイルアップロード前の確認などの操作を SFC 呼び出し元で自由に制御する

まとめ

  • Dropzone の addedfile イベント時に emit するが、この時に送出する変数としてイベント発生時に受け取れる file 以外に、 Dropzone オブジェクトも加える。

話としては、 Vue.js 3 で Dropzone をラップした SFC その3 。ファイルアップロード前に確認操作を挟む – oki2a24 の続きとなります。

カテゴリー
コンピューター

Vue.js 3 で Dropzone をラップした SFC その3 。ファイルアップロード前に確認操作を挟む

Vue.js 3 で Dropzone をラップした SFC その2 。 HTML 要素 の id ではなく要素そのものを指定して Dropzone と紐付ける等 – oki2a24 の続きとなります。

Dropzone はファイルをドロップや選択すると予め指定した URL に対して、自動的に即座にアップロードを開始します。 とても便利ですけれども、例えば、ヘッダに情報を追加した Axios を他のところでも使っているので Dropzone でも使いたい、ファイルアップロード前に確認操作を挟みたい、という時はどうしたら良いでしょうか?

本投稿では、ファイルアップロード前に確認操作を挟みたい、の例をとりあげます。

カテゴリー
コンピューター

Vue.js 3 で Dropzone をラップした SFC その2 。 HTML 要素 の `id` ではなく要素そのものを指定して Dropzone と紐付ける等

カスタマイズした内容

  • <template><div> 要素の id ではなく、 <div> 要素そのものを Dropzone を紐づくようにした。
  • Dropzone の options を渡せるようにした。