フォームからのファイルの添付

フォームからアップロードされたファイルを、管理者宛てのメールへ添付して送信できます。

必要な設定

ファイルをメールへ添付するには、以下の設定が必要です。

  • フォーム設定で「メールに添付する」を有効にする

  • form 要素に enctype="multipart/form-data" を指定する

  • ファイル選択項目に type="file" を指定する

画像ファイルをアップロードする場合は、あわせて以下の設定も必要です。

  • 「アップロード許可ファイル拡張子」に画像拡張子を追加する

メールへの添付を有効にする

フォーム管理 > ファイル添付から「メールに添付する」を有効にします。

有効にすると、フォームからアップロードされたファイルが管理者宛てメールに添付されます。

メールテンプレートに特別な設定は必要ありません。

ファイル添付オプションの有効化

ファイル添付オプションの有効化

form要素の設定

ファイルをアップロードする場合は、form 要素に enctype="multipart/form-data" を指定してください。

<form action="" method="post" enctype="multipart/form-data">

この設定がない場合、ファイルは送信されません。

ファイル選択項目を作成する

ファイル選択項目は type="file" を指定して作成します。

<input type="file" name="pdf">

画像ファイルをアップロードする場合も同様です。

<input type="file" name="image">

アップロードを許可する拡張子を設定する

画像ファイルをアップロードする場合は、コンフィグ > 編集設定の「アップロード許可ファイル拡張子」に対象の拡張子を追加してください。

例

png
jpg
jpeg
gif
webp

設定されていない拡張子はアップロードできません。

添付できる拡張子を制限する

フォームごとに、添付可能な拡張子を制限できます。

例えば PDF と ZIP のみ許可する場合は、以下のように指定します。

<input type="hidden" name="pdf@extension[]" value="pdf">
<input type="hidden" name="pdf@extension[]" value="zip">

複数の拡張子を許可する場合は、許可したい数だけ設定してください。

拡張子エラーの表示

許可されていない拡張子がアップロードされた場合は、以下のようにエラーメッセージを表示できます。

<!-- BEGIN pdf:v#extension -->
許可されていない拡張子です
<!-- END pdf:v#extension -->
{% if pdf.v.extension %}
許可されていない拡張子です
{% endif %}

添付ファイルのサイズを制限する

添付可能なファイルサイズを制限できます。（Ver. 2.6.1.4 以降で利用可能）

テンプレートで指定する

以下の例では 200KB を上限として設定しています。

<input type="hidden" name="pdf:v#filesize" value="200">

サイズは KB 単位で指定します。

管理画面で指定する

フォーム設定画面の「ファイルサイズ上限値」を設定することもできます。

フォームオプションの設定
フォームオプションの設定

サイズは KB 単位で指定します。

テンプレート上の設定だけでは、ブラウザの開発者ツールなどから値を書き換えられる可能性があります。そのため、運用時は管理画面側でも上限値を設定することをおすすめします。

サーバーの upload_max_filesize や post_max_size を超えるサイズのファイルはアップロードできません。フォーム側で設定した上限値よりも、PHP の設定値が優先されます。

エラーメッセージの記述方法

指定した容量を超えた場合や、upload_max_filesizeを超えた場合のブロック

<!-- BEGIN pdf:v#filesize -->
ファイルサイズが大きすぎます
<!-- END pdf:v#filesize -->
{%if pdf.v.filesize %}
ファイルサイズが大きすぎます
{% endif %}

post_max_sizeを超えた場合のメッセージブロック（全体）

upload_max_filesize超えた場合、POSTが空になるのでフィールド毎にエラーは表示できません。 なので、以下の記述で全体のエラーメッセージを出力します。

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->

この特殊なエラーブロックは、標準テンプレートのみ対応しており、twig記法では出力できません。

ソースコードの例

以下は、変数名がpdfだった場合のソースコードの例です。

<tr>
  <th>PDF</th>
  <td>
    <!-- アップロード済みのファイルのプレビューエリア -->
    <!-- BEGIN_IF [{pdf@path}/nem/] -->
    <img src="%{ARCHIVES_DIR}{pdf@path}" width="450" alt="" /><br />
    <a href="%{ARCHIVES_DIR}{pdf@path}">{pdf@originalName}</a>
    <input type="hidden" name="pdf@old" value="{pdf@path}" />
    <input type="hidden" name="pdf@secret" value="{pdf@secret}" />
    <input type="hidden" name="pdf@originalName" value="{pdf@originalName}" />
    <label for="input-checkbox-pdf@edit">
      <input type="checkbox" name="pdf@edit" value="delete" id="input-checkbox-pdf@edit" />
      削除
    </label><br />
    <!-- END_IF -->

    <!-- ファイルをアップロードするフィールド -->
    <input type="hidden" name="pdf:v#filesize" value="500" id="pdf-v-filesize"> <!-- 500KBで制限 -->
    <input type="file" name="pdf" size="20" />
    <input type="hidden" name="field[]" value="pdf" />
    <input type="hidden" name="pdf:extension" value="file" />
    <input type="hidden" name="pdf@extension[]" value="pdf" />

    <!-- エラーメッセージ -->
    <div data-validator-label="pdf-v-filesize" class="validator-result-{pdf:v#filesize}">
      <p class="error-text"><span class="acms-icon acms-icon-attention"></span>ファイルサイズが大きすぎます。</p>
    </div>
    <div data-validator-label="pdf-v-extension" class="validator-result-{pdf:v#extension}">
      <p class="error-text"><span class="acms-icon acms-icon-attention"></span>許可されていない拡張子です。</p>
    </div>
  </td>
</tr>

<!-- BEGIN post:v#filesize -->リクエストサイズが大きすぎます<!-- END post:v#filesize -->
<tr>
  <th>PDF</th>
  <td>
    <!-- アップロード済みのファイルのプレビューエリア -->
    {% if pdf.value.path %}
    <img src="{{ pdf.value.path }}" width="450" alt="" /><br />
    <a href="{{ pdf.value.path }}">{{ pdf.value.originalName }}</a>
    <input type="hidden" name="pdf@old" value="{{ pdf.value.path }}" />
    <input type="hidden" name="pdf@secret" value="{{ pdf.value.secret }}" />
    <input type="hidden" name="pdf@originalName" value="{{ pdf.value.originalName }}" />
    <label for="input-checkbox-pdf@edit">
      <input type="checkbox" name="pdf@edit" value="delete" id="input-checkbox-pdf@edit" />
      削除
    </label><br />
    {% endif %}

    <!-- ファイルをアップロードするフィールド -->
    <input type="hidden" name="pdf:v#filesize" value="500" id="pdf-v-filesize"> <!-- 500KBで制限 -->
    <input type="file" name="pdf" size="20" />
    <input type="hidden" name="field[]" value="pdf" />
    <input type="hidden" name="pdf:extension" value="file" />
    <input type="hidden" name="pdf@extension[]" value="pdf" />

    <!-- エラーメッセージ -->
    <div data-validator-label="pdf-v-filesize" class="validator-result-{{ pdf.v.filesize ? '0' : '1' }}">
      <p class="error-text"><span class="acms-icon acms-icon-attention"></span>ファイルサイズが大きすぎます。</p>
    </div>
    <div data-validator-label="pdf-v-extension" class="validator-result-{{ pdf.v.extension ? '0' : '1' }}">
      <p class="error-text"><span class="acms-icon acms-icon-attention"></span>許可されていない拡張子です。</p>
    </div>
  </td>
</tr>

変数名

ここではファイル添付をした時に使用できる変数名を解説します。以下変数名が「pdf」だった場合で解説します。

標準テンプレート Twig 出力される内容
{pdf@path} {{ pdf.value.path }} ファイルが実態があるURLです。ファイル名なランダムなものになっています。
{pdf@originalName} {{ pdf.vlaue.orginalName }} 元のファイル名です。ダウンロード時のファイル名も元のファイル名が使用されます。
{pdf@secret} {{ pdf.value.secret }} セキュリティのためのランダム文字列です。

イントロダクション

入門

コア概念

フロントエンド開発

機能ガイド

リファレンス

アップデート

拡張・カスタマイズ

ツール