既存のフォームに簡単にドラッグ&ドロップによるファイルアップローダーを設置できるシンプルなJavaScriptライブラリ・「EasyDropzoneJS」

EasyDropzoneJS

EasyDropzoneJSは既存のフォームに簡単にドラッグ&ドロップによるファイルアップローダーを設置できるシンプルなJavaScriptライブラリです。

非依存で使い方もシンプルなので、既存のフォームに簡単に組み込めると思います。

<link href="default.css" rel="stylesheet" />
<script src="easydropzone.js"></script>

👆 CSSとライブラリを読み込みます。

<div id="exampleDropzone">
    <input name="file" type="file" accept="image/png, image/jpg, image/jpeg"/>
</div>

👆 アップロード要素を用意します。

new EasyDropzone('exampleDropzone');

👆 要素を指定すれば動作します。

const dropzoneDefaults = {
    clickText: "or click here",
    dragText: "Drag a file here",
    numFilesErrorMessage: "Only one file is allowed",
    numFilesErrorFunction: function(errorMessage) {
        alert(errorMessage);
    },
    invalidFileTypeErrorMessage: "Invalid file type",
    invalidFileTypeErrorFunction: function(errorMessage) {
        alert(errorMessage);
    },
    imagePreview: true,
}

👆 オプションとして上記が用意されています。

var config = {
        clickText: "又はクリックで選択",
        dragText: "ここに画像をドラッグしてアップロード",
    }
    new EasyDropzone('exampleDropzone', config);

👆 変更内容は配列にして初期化コードに代入すれば変更内容が反映されます。

とても簡単ですね。コードはGitlabで公開されています。ライセンスはApache2.0との事です。

EasyDropzoneJS