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

Vue.js 用の Dropzone ライブラリを軽く試したメモ

Yaxian/vue3-dropzone: HTML5 drag-drop zone with vue3 は Vue.js 3 では動いた。

まとめ

2021年5月4日現在、 Dropzone.js を Vue.js から簡単に使えるようにするためのライブラリの状況は、

環境

rowanwins/vue-dropzone: A Vue.js component for Dropzone.js – a drag’n’drop file uploads utility with image previews

npm install --save-dev vue2-dropzone

次の laravel/resources/js/views/Vue2Dropzone.vue を追加しました。 Vue Router も修正しておりますが、割愛します。

<template>
  <h1>vue2-dropzone sample</h1>
  <p>
    <a href="https://github.com/rowanwins/vue-dropzone" target="_blank"
      >rowanwins/vue-dropzone: A Vue.js component for Dropzone.js - a
      drag’n’drop file uploads utility with image previews</a
    >
    は Vue.js 3 では動かない。
  </p>
  <vue-dropzone
    id="dropzone"
    ref="myVueDropzone"
    :options="dropzoneOptions"
  ></vue-dropzone>
</template>

<script>
import vue2Dropzone from "vue2-dropzone";
import "vue2-dropzone/dist/vue2Dropzone.min.css";
import { reactive } from "vue";
export default {
  name: "Vue2Dropzone",
  components: {
    vueDropzone: vue2Dropzone,
  },
  setup() {
    const dropzoneOptions = reactive({
      url: "https://httpbin.org/post",
      thumbnailWidth: 150,
      maxFilesize: 0.5,
      headers: { "My-Awesome-Header": "header value" },
    });

    return {
      dropzoneOptions,
    };
  },
};
</script>

例えば次のようなエラーとなってしまいました。

app.js:56452 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined

やはり、という感じです。というのも、 Vue 3 Support · Issue #578 · rowanwins/vue-dropzone というページがあり、対応されていないのがわかっていたためです。

Yaxian/vue3-dropzone: HTML5 drag-drop zone with vue3

npm install --save-dev vue3-dropzone

次の laravel/resources/js/views/Vue2Dropzone.vue を追加しました。やはり Vue Router も修正しておりますが、割愛します。

<template>
  <h1>vue3-dropzone sample</h1>
  <p>
    <a href="https://github.com/Yaxian/vue3-dropzone" target="_blank"
      >Yaxian/vue3-dropzone: HTML5 drag-drop zone with vue3</a
    >
    は Vue.js 3 では動く。
  </p>

  <div>
    <div v-bind="getRootProps()">
      <input v-bind="getInputProps()" />
      <p v-if="isDragActive">Drop the files here ...</p>
      <p v-else>Drag 'n' drop some files here, or click to select files</p>
    </div>
    <button @click="open">open</button>
  </div>
</template>

<script>
import { useDropzone } from "vue3-dropzone";
export default {
  name: "Vue3Dropzone",
  setup() {
    function onDrop(acceptFiles, rejectReasons) {
      console.log(acceptFiles);
      console.log(rejectReasons);
    }

    const { getRootProps, getInputProps, ...rest } = useDropzone({ onDrop });

    console.log(rest);

    return {
      getRootProps,
      getInputProps,
      ...rest,
    };
  },
};
</script>

http://localhost/vue3_dropzone へアクセスするとこちらはエラーもなく、動きました!コンソールのログをみてみても、選択、ドロップ共にファイルを取得できています。使えそうです。

あと気になっているのは次のことです。

  • スタイルが一切無いが当てる方法はわかっていない。
  • 選択したりドロップしたりしたファイルは、配列としていっぺんに得られる。したがって並列にアップロードなどはこのライブラリではできないのか、もっとよく調べればできるのか、よくわかっていない。
  • ドキュメントは react-dropzone/react-dropzone: Simple HTML5 drag-drop zone with React.js. を見たほうが良さそう。このライブラリを真似て作ったようなので。

おわりに

Yaxian/vue3-dropzone: HTML5 drag-drop zone with vue3 は使えそうに思ましたが、そもそも Dropzone.js をよく知らないので本当にうまく使えるのかどうか、どうやってカスタマイズして自分の使いたいように使うのか、がわからない、というオチとなりました。

やはり Dropzone.js を一度実際にいじってみた方が良さそうに感じております。

以上です。

コメントを残す