Skip to main content
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();
  }
});