LoginSignup
0
0

More than 3 years have passed since last update.

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

Posted at

経緯

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

調査

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://jvndb.jvn.jp/ja/contents/2020/JVNDB-2020-006298.html)
Armoris日記 CVE-2020-24389編

導入へ

A)管理画面からプラグインの導入
スクリーンショット 2021-03-20 13.58.28.png

B)サイトからダウンロードして管理画面で落としてきたファイルをアップロード
スクリーンショット 2021-03-20 13.57.48.png

スクリーンショット 2021-03-20 14.06.27.png

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

設定

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

スクリーンショット 2021-03-20 14.07.38.png

保存は忘れずにね!

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

フォームタブ

フォームの画面にボタンが追加されていますのでクリックすると
スクリーンショット 2021-03-20 14.13.35.png

モーダルが出ますのでここでアップロードできるファイル容量、数や形式の設定を行います
スクリーンショット 2021-03-20 14.13.43.png

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

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

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

タグを挿入をclick

メールタブ

アップロードした添付をメールで受け取るにはメールタブを選択して
スクリーンショット 2021-03-20 14.43.14.png

下部にあるファイル添付に追加したタグ名を入れます。
スクリーンショット 2021-03-20 14.39.43.png

ページ確認

スクリーンショット 2021-03-20 14.44.43.png

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

スクリーンショット 2021-03-20 14.47.40.png

最大アップロード数は5に設定しているので、6枚目はしっかり弾かれます
スクリーンショット 2021-03-20 14.49.35.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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0