File Upload Form - PipedForm

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.

<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>

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

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.

<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>

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();
  }
});