> ## Documentation Index
> Fetch the complete documentation index at: https://pipedform.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# File Upload Form

Accept file uploads through your form, whether you're using a plain HTML form submission or handling the upload with JavaScript for more control over the submission flow.

## Using `multipart/form-data`

The simplest way to accept file uploads is with a plain HTML form using `enctype="multipart/form-data"`. This requires no JavaScript.

```html theme={null}
<form action="https://pipedform.com/f/{form_id}" enctype="multipart/form-data" method="POST">
  <input name="name" required>
  <input type="email" name="email" required>

  <input type="file" name="attachment" />

  <button type="submit">Send</button>
</form>
```

<Warning>
  Make sure your form includes `enctype="multipart/form-data"` - without this, file uploads will not be sent correctly.
</Warning>

## Using JavaScript

Submit the form with `fetch` and `FormData` to upload files without reloading the page. `FormData` automatically handles file fields correctly, so no additional configuration is needed.

<CodeGroup>
  ```html HTML theme={null}
  <form
    action="http://localhost:3000/f/019f3087-75b9-7f0a-b82f-464d96057ef3"
    method="POST"
    enctype="multipart/form-data"
    id="my-form"
  >
    <!-- ... -->
    <input type="file" name="attachment" required />
    <!-- ... -->

    <button type="submit">Send</button>
  </form>
  ```

  ```javascript JavaScript theme={null}
  const form = document.getElementById('my-form');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const form = e.currentTarget;
    const destinationUrl = form.action;
    const formData = new FormData(e.currentTarget);

    const maxFileSize = 5 * 1024 * 1024; // 5MB in bytes
    const file = formData.get('attachment');

    if (file.size > maxFileSize) {
      alert('File too large, maximum 5MB');
      return;
    }

    const res = await fetch(destinationUrl, {
      method: 'POST',
      body: formData,
    });
    const json = await res.json();

    console.log(json);

    if (res.ok) {
      form.reset();
    }
  });
  ```
</CodeGroup>