Kikuchi開発者も手を付けたくない。デザイナーもうんざり。ユーザーに使われないフォームですが、Dropzone.jsを使うとリッチに簡単に導入することができますので、やり方とサンプルコードを紹介します。フォームの実装はセキュリティのことも踏まえると、実装が大変な機能の1つです。そのため、フォーム関連のツールやライブラリは一見の価値があります。その中でも「Dropzone.js」は多機能でデザインも良く、かつファイルのバリデート機能もついているので選択肢の1つに加えてみてはいかがでしょうか?この記事では、Dropzoneの実装方法をいくつかのサンプルコードを踏まえて紹介します。ドロップでのファイルアップロードを可能にしてくれます。Desktopユーザーはこの方法でファイルをアップロードするのに慣れていますので、大変便利です。Dropのブラウザサポートも幅広くなっているので、古いブラウザを使っている人が多いサイトを運営している場合でも敷居が低いでしょう。DropのUXも素敵です。画像ファイルの場合、アップロードが完了した時点でサムネイルファイルの表示を行ってくれます。複数の画像ファイルを一度にアップロードさせたい時に、どのファイルの区別がつきやすくユーザーに優しいです。要約すると、主な特徴は下記の通りです。JavaScript単体で利用可能。複数のファイルの更新を同時に行うことができるプログレスバーの表示デザインの拡張性のしやすさファイルが33kbで軽量ブラウザサポート公式ドキュメントによると、サポートされているブラウザーは下記の通り。+補足ちなみに、Dropdown.jsではプラグインがブラウザにサポートされない場合にフォールバック機能を適用するオプションもついています。ダウンロードしてください。ZIPでも問題ないですし、後述しますがCDNも提供されていますので、CDN使う人は飛ばして構いません。enyo/dropzoneGitコマンドに詳しくない人は下記記事も参考にどうぞ。https://idea-hack.com/blog/80612/Tipsこの記事では解説範囲外としますが、Dropzone.jsは第三者によるReact.JS版の開発も進められています。React.JS版を利用する方はこちらをダウンロードしてください。Dropzone.js必要なファイルの読み込みダウンロードファイルの中には開発環境向けのファイルも入っているので必要なファイルだけ読み込みます。basic.min.cssdropzine.min.cssdropzone.min.jsCDNを読み込みたい方は下記コードをコピーしてください。href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css"/>Dropzone.JSの基本的な使い方Dropzone.JSをフォームに適用する最もシンプルな方法は「form要素にCSSクラスdropzoneを適用する」ことです。class="dropzone"></form>basic.cssを読み込んでいるため、Dropzone.jsが用意したデフォルトのスタイルが読み込まれています。実際にこのページに画像ををアップロードしてみてください。(サーバーサイド実装はしていないので、サイトには保存されません。)技術的に必要な動作はこの時点で十分ですが、ほとんどのケースではいくつかのカスタムオプションを加えたいはずです。カスタムオプションのフォーマットは下記の通りです。//};【WIDGET_ID】の部分はHTMLに記載した任意のID属性の値をつけるのですが、1つ注意点がありまして、キャメルケースにして書かなければいけません。//};このサンプルコードではHTMLに付けたID属性の値を「upload-widget2」にしたので、JSではキャメルケースにして「uploadWidget2」になります。別の書き方として、インスタンス化するのもありです。この場合キャメルケースは必要ありません。コードは下記の通りです。全ては紹介しきれませんが、いくつか主要の物を紹介します。オプション全一覧URLアップロードフォームがデータを送信するURLです。必須のパラメーターですが、もしHTML内にaction属性を適用している場合は必要ないです。'/upload',};MethodMethodオプションはHTTPメソッドをセットするためのプロパティです。んdの場合はデフォルトのPOSTで問題ないでしょうが、必要に応じてGETなどを指定することができます。'post',};maxFilesユーザーがアップロードできるファイルをの最大数を指定します。制限をなくしたければnullを指定します。1つしかアップロードさせない様にするために、使用する人は多いと思います。'1',};maxFileSizeアップロードされるファイルの最大のサイズを指定することができます。制限なしであれば「null」をしてします。公式サイトではややわかりづらく書いてありますが、単位は「MB」です。ドロップの他に、アップロードエリアをクリックすることでファイルダイアログが開き、そこからファイルを選択することも可能です。false,};これが必要ない人は、このプロパティをfalseに変更しましょう。acceptFilesacceptFilesプロパティを使用すれば、アップロードを許可するファイル形式を指定できます。MINE-typesで指定してあげる必要があり、複数指定する場合はコンマで区切ってください。このサンプルでは画像だけ許可するコードを紹介します。'image/*',};サムネイル関連のプロパティサムネイル画像のWidthとHeightを指定することができます。いくつかまとめました。あるので公式サイトも参考にしてください。300,};ちなみに、thumbnailWidthもthumbnailHeightもnullにするとリサイズされず、そのままの画像が表示されます。独自の追加処理アップロード前にバリデートをかけたい場合は独自のカスタムコードを追加することができます。このプラグインに含まれているプロパティでできることをここで行うことは推奨されていません。KAZUKIこちらは実際に動くサンプルは用意してません。ロジックだけの解説です。done();}下記のように条件に応じてdone()メソッドを使うことができます。invalid!');の様に引数を記入した場合、処理が中断され、エラーメッセージが出力されます。)の状態で返すと処理はそのまま続きます。アップロードメッセージの変更これもよく使いますね。英語圏ではないユーザーは必ず使うのではないでしょうか。こちらはアップロード前のメーセージ内容を変更するために使います。ドロップで追加してください',};CSRFトークンの追加アップロードにおいてセキュリティ対策は非常に重要です。防止のためにheadersプロパティを使ってHTTPリクエストに追加のHeader情報を付与しましょう。KAZUKIこちらは実際に動くサンプルは用意してません。ロジックだけの解説です。HTMLのheadタグ内に下記HTMLを追加します。content="CL2tR2J4UHZXcR9BjRtSYOKzSmL8U1zTc7T8d6Jz">そしてJavaScrptを下記の様に書きます。document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,},};詳しくない人向けに、jQueryのコードも書いておきます。$('meta[name="csrf-token"]').attr('content')},};Dropzone.JSのイベントDropzone.jsには複数のイベントが用意されており、独自の処理を追加したり、または処理を取り除いたりして、プラグインの拡張を行うことができます。Dropzone.jsの関数を使って行うデモコードで使っていた、Dropzone.jsが標準として用意している方法です。インスタンスを作成からイベントの動作を細かくコントロールしたり、デフォルトで用意されている方法では対応できない人向けにインスタンスを作成して行う方法も用意されています。インスタンス化のコードは冒頭で紹介しています。ここではインスタンス化された場合のイベント追加のサンプルコードを紹介します。...});どんな時に使うの?最もよく使うのは「success」イベントだともいます。これはアップロードが成功したら実行されます。成功した時に追加処理を加えたい時に便利ですね。objectとXMLHttpRequest)を返してくれます。その他にも「addedfile」イベントや「removefile」イベントなどもありますので、詳しく知りたい人は公式サイトで確認をお願いします。動作サンプル1つイベントを使ったサンプルコードを紹介しましょう。アップロードされる画像のWidthまたはHeightが条件を満たしていなかった場合はアップロードを拒否します。これは標準の機能では実装できません。下記の様にイベントとacceptを駆使します。以上なければなりません。};},};Dropzone.JSのデザイン変更デザインの拡張性も大変優れています。basic.css)を参照すると良いでしょう。href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/dropzone.css"/>デフォルトのHTMLは下記の様になっています。data-dz-errormessage></span></div></div>まとめ画像のアップロードに大変便利なフォームであることが理解いただけたと思いますが、実際のデータ保存にはサーバーサイドで別の実装が必要な点も覚えておきましょう。HACKHomeShareFollowTop。