• ガイド
  • Form App

ファイルアップロード

Table of contents

Form Appで作ったフォームにファイルアップロード機能を実装することができます。
form要素に enctype="multipart/form-data" を追加したら準備完了です。

ファイルを1件アップロードする

input要素に type=file を設定することで、ファイルを選択してアップロードすることができます。

<form method="post" action="https://{spaceUid}.form.newt.so/v1/{formUid}" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="file" name="attachment">
    <button type="submit">Submit</button>
</form>

ファイルを複数件アップロードする

1つのフィールドに対して複数件のファイルをアップロードしたい場合、 name="attachments[]" のように末尾に[]を加えることで、複数ファイルを配列データとして送信することができます。

input要素を複数設置する

送信したいファイル数があらかじめ決まっている場合は、input要素を決められたファイル数分だけ設置することで複数ファイルを配列データとして送信できます。

<form method="post" action="https://{spaceUid}.form.newt.so/v1/{formUid}" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="file" name="attachments[]">
    <input type="file" name="attachments[]">
    <button type="submit">Submit</button>
</form>

multiple属性を用いた複数ファイルアップロード

input要素のmultiple属性を利用することで、1つのinput要素に対して複数ファイルを選択することができます。

<form method="post" action="https://{spaceUid}.form.newt.so/v1/{formUid}" enctype="multipart/form-data">
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="file" name="attachments[]" multiple>
    <button type="submit">Submit</button>
</form>

ファイルサイズ制限

Form Appでは、送信可能なファイル1件あたりのサイズに上限を設けています。

EntryプランBasicプランAdvancedプラン
1件あたりのファイルサイズ5MB25MB25MB
NewtMade in Newt