警告:公開以来、このコンポーネントには次の通知があります。「このコンポーネントは当初の期待をはるかに超えており、ユーザーが必要とする量のサポートを提供できません。」

序章

vue-dropzone は、 Dropzone.js の上に実装されたVueコンポーネントであり、画像プレビューを使用したファイルアップロードのドラッグアンドドロップ機能を提供します。

非常に強力で多くのオプションがありますが、ほとんど構成を行わなくても、すぐに使用できる多くの機能が提供されます。 複数のファイルのアップロードを実行したり、それらをキャンセルしたり、ファイルのサイズと形式を検証したり、進行状況バーを表示したりすることができます。

プロジェクトの設定

vue-dropzoneをインストールすることから始めましょう。

  1. npm install vue2-dropzone

次に、main.jsエントリポイントファイルで、CSSファイルをインポートする必要があります。

import 'vue2-dropzone/dist/vue2Dropzone.css'

基本的な画像のアップロードの処理

基本的な画像のアップロードを作成するには、コンポーネントをインポートし、それを使用してidoptionsのプロパティを提供する必要があります。

<template>
  <div id="app">
    <vue-dropzone id="drop1" :options="dropOptions"></vue-dropzone>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  data: () => ({
    dropOptions: {
      url: "https://httpbin.org/post"
    }
  }),
  components: {
    vueDropzone
  }
};
</script>

注: URL https://httpbin.org/postは、HTTP POST呼び出しに対して有効な応答を返す、HTTPサービスからのエンドポイントです。

オプションの適用

必要なオプションはurlだけですが、使用できるオプションは他にもたくさんあります。

たとえば、次のようにするとします。

  • 最大4つのファイル
  • 最大ファイルサイズ2MB
  • 500バイト単位で送信
  • 150pxのカスタムサムネイルサイズを設定します
  • アップロードされたアイテムをキャンセル可能にして削除可能にします(デフォルトでは削除されません)

次のように、これらすべてのビジネスルールをコンポーネントに適用できます。

export default {
  data: () => ({
    dropOptions: {
      url: "https://httpbin.org/post",
      maxFilesize: 2, // MB
      maxFiles: 4,
      chunking: true,
      chunkSize: 500, // bytes
      thumbnailWidth: 150, // px
      thumbnailHeight: 150,
      addRemoveLinks: true
    }
  })
  // ...
}

addRemoveLinksオプションは、ドロップゾーンの各プレビューにキャンセルおよび削除リンクを追加します。

dropzonedocsで完全なオプションを確認できます。

ドロップゾーンの制御

カスタム機能を実装する場合、vue-dropzoneは、<vue-dropzone>タグのrefを使用してアクセスできるいくつかのメソッドを公開します。

たとえば、アップロードされたすべてのファイルを削除するボタンを実装できます。

<template>
  <div id="app">
    <vue-dropzone ref="dropzone" id="drop1" :options="dropOptions"></vue-dropzone>
    <button @click="removeAllFiles">Remove All Files</button>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  // ...
  methods: {
    removeAllFiles() {
      this.$refs.dropzone.removeAllFiles();
    }
  }
};
</script>

イベントの処理

何かが起こったときにあらゆる種類のアクションを実行するために使用できる一連のイベントがあります。

たとえば、ファイルがいつアップロードされたかを確認するには、vdropzone-completeイベントを使用できます。

<template>
  <div id="app">
    <vue-dropzone
      ref="dropzone"
      id="drop1"
      :options="dropOptions"
      @vdropzone-complete="afterComplete"
    ></vue-dropzone>
    <button @click="removeAllFiles">Remove All Files</button>
  </div>
</template>

<script>
import vueDropzone from "vue2-dropzone";

export default {
  // ...
  methods: {
    afterComplete(file) {
      console.log(file);
    }
  }
};
</script>

アップロードが失敗したときやアップロードがキャンセルされたときにメッセージを表示する場合でも、一般的な操作の多くでイベントを使用する必要はありません。 vue-dropzoneは、デフォルトですべてをカスタマイズ可能な形式で提供するため、イベントを使用する前に、必要な機能がすでに存在するかどうかを確認してください。

スタイルのカスタマイズ

ドロップゾーンのスタイルをカスタマイズするには、最初にinclude-stylingプロパティをfalseに設定して、デフォルトのスタイルをオフにする必要があります。

<vue-dropzone
  id="drop1"
  :include-styling="false"
></vue-dropzone>

次に、previewTemplateオプションを指定し、テンプレートとそのクラスによって定義された正しい構造を含む文字列を渡します。 出発点として、公式の例からテンプレートの例をとることができます。

<vue-dropzone
  id="drop1"
  :options="dropOptions"
  :include-styling="false"
></vue-dropzone>

<script>
const getTemplate = () => `
<div class="dz-preview dz-file-preview">
  <div class="dz-image">
    <div data-dz-thumbnail-bg></div>
  </div>
  <div class="dz-details">
    <div class="dz-size"><span data-dz-size></span></div>
    <div class="dz-filename"><span data-dz-name></span></div>
  </div>
  <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
  <div class="dz-error-message"><span data-dz-errormessage></span></div>
  <div class="dz-success-mark"><i class="fa fa-check"></i></div>
  <div class="dz-error-mark"><i class="fa fa-close"></i></div>
</div>
`;

export default {
  data: () => ({
    dropOptions: {
      previewTemplate: getTemplate()
    }
  })
}
</script>

次に、さまざまなクラス名をターゲットにすることで、CSSを使用してスタイルを設定できます。

<style>
  #drop1 {
    height: 200px;
    padding: 40px;
    color: white;
    background: black;
  }

  #drop1 .dz-preview {
    width: 160px;
  }
  /* ... */
</style>

結論

この紹介が、vue-dropzoneを自分で試してみるための出発点になったことを願っています。

この記事の動作するデモとコードは、このコードサンドボックスにあります。