drag-and-drop-multiple-file-upload-contact-form-7 を入れてみた忘備録

#経緯
wpのサイトでフォームに「contact-form-7」を使わせてもらっていた。　　
要件に画像添付があり、１ファイルだけ添付をできるようにしていた
その後、画像を複数入れたいという要望があった

#調査
contact-form-7ありきなのでこれにどうやったら複数のファイルを添付できるのか探していて
A)　Multifile Upload Field for Contact Form 7
B)　drag-and-drop-multiple-file-upload-contact-form-7 
C)　プラグイン入れず、ファイルボタンを複数入れる

Cは最後の選択としてAかBを剪定してAは更新が止まっていたのでBを選び、
使うにあたり、調査したところプラグインの脆弱性が上がっていましたが、すでに修正もできているので使ってみることにした

https://wordpress.org/plugins/drag-and-drop-multiple-file-upload-contact-form-7/

[プラグインにおける危険なタイプのファイルの無制限アップロードに関する脆弱性]（https://jvndb.jvn.jp/ja/contents/2020/JVNDB-2020-006298.html）
[Armoris日記 CVE-2020-24389編](https://armoris.hatenablog.com/entry/2020/10/02/093956)

#導入へ
A)管理画面からプラグインの導入
![スクリーンショット 2021-03-20 13.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/9f0cfac2-b053-1c54-9cce-57effa06f626.png)

B)サイトからダウンロードして管理画面で落としてきたファイルをアップロード
![スクリーンショット 2021-03-20 13.57.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/109638c4-3dca-e22d-1691-e464a330ffba.png)

![スクリーンショット 2021-03-20 14.06.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/4e943bab-f06b-2be0-bd29-4c81c14101ef.png)


どちらでもいいかと思いますが、インストールしたら有効化。

#設定
お問い合わせのメニュー内に有効化したら「Drag & Drop Upload」が現れますので
Drag & Drop Uploader - Settingsで文言の変更しました。
デフォルトは英語表記ですので日本語に変更しました。

![スクリーンショット 2021-03-20 14.07.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/d6450bb6-12a6-9bf9-38d9-7115a1cc1e3a.png)

保存は忘れずにね！

プラグインのアップロードの設定が終わったらフォームに追加します。

###フォームタブ
フォームの画面にボタンが追加されていますのでクリックすると
![スクリーンショット 2021-03-20 14.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/d4da0496-fa2b-9338-e5e6-1ad11e798192.png)

モーダルが出ますのでここでアップロードできるファイル容量、数や形式の設定を行います
![スクリーンショット 2021-03-20 14.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/2d33adec-0ab1-7092-0a71-2382deeb1a95.png)

全部設定はしたのですが、

ファイルサイズの上限 (バイト) 
参考にさせてもらった記事ではkbでの設定も可能と記事にありましたが、動かなくてbyteで値を入れました

受け入れ可能なファイル形式	
設定しておけばそれ以外のファイル形式はアップロードできないようなので設定しました

タグを挿入をclick

###メールタブ
アップロードした添付をメールで受け取るにはメールタブを選択して
![スクリーンショット 2021-03-20 14.43.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/d5220a4d-7d9b-1901-231e-f32b98d59d7f.png)

下部にあるファイル添付に追加したタグ名を入れます。
![スクリーンショット 2021-03-20 14.39.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/7c585bf1-5dbe-a177-f7c7-648b4a8dbe17.png)

### ページ確認
![スクリーンショット 2021-03-20 14.44.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/a91ae2d0-0451-b7d3-5a70-3033f295900a.png)

1枚のファイル容量は1.5MBにしてみたのですが1.5MB以上のファイルはしっかり弾かれます

![スクリーンショット 2021-03-20 14.47.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/5a7b5353-6636-2eaa-d14a-a8e422174103.png)

最大アップロード数は５に設定しているので、6枚目はしっかり弾かれます
![スクリーンショット 2021-03-20 14.49.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/376588/7a5643fd-e77f-1c73-c2f5-f062d39d75aa.png)

### 最後に
contact-form-7に添付ファイルを複数つける方法でした。
調べてもそんなに選択肢はなかったのですが、ドロップでも添付できるので直感的だと思いました
セキュリティのこともあるのでアップデートはしっかりしていこうと思います。

* <?php wp_footer();?> 入れ忘れないように

参考
https://yuki.world/contact-form-7-drag-and-drop-multiple-file-upload/
https://www.hiskip.com/wp/plugin/site-manage/contactform/cf7/10534.html