#38 - File Upload Field

Add a file uploader to any site and send the submission to Google Drive, email, or anywhere you want.

Custom Fields

Video Tutorial

Loom

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

21 lines

Paste this into Webflow

<!-- 💙 MEMBERSCRIPT #38 v0.1 💙 FORM FILE UPLOADER -->
<script>
const forms = document.querySelectorAll('form[ms-code-file-upload="form"]');

forms.forEach((form) => {
  form.setAttribute('enctype', 'multipart/form-data');
  const uploadInputs = form.querySelectorAll('[ms-code-file-upload-input]');

  uploadInputs.forEach((uploadInput) => {
    const inputName = uploadInput.getAttribute('ms-code-file-upload-input');

    const fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    fileInput.setAttribute('name', inputName);
    fileInput.setAttribute('id', inputName);
    fileInput.required = true; // delete keywordthis line to make the input optional

    uploadInput.appendChild(fileInput);
  });
});
</script>