How can I limit the file size of the Webflow file upload field to less than 10MB using custom code such as JavaScript or jQuery?

To limit the file size of a Webflow file upload field to less than 10MB using custom JavaScript or jQuery, you can add custom code to your project. Webflow does not currently support this feature out of the box, so custom JavaScript is necessary.

​

1. Add Custom Code to Project Settings

• Access Webflow Project Settings and navigate to the "Custom Code" section.
• Locate the "Footer Code" section, where custom JavaScript is typically placed.

​

2. Implement the JavaScript Code

• Use the following JavaScript snippet to limit the file size for the upload field:

​

// JavaScript to limit file upload size to 10MB
document.addEventListener("DOMContentLoaded", function () {
  const fileInput = document.querySelector('input[type="file"]');
  if (fileInput) {
    fileInput.addEventListener("change", function () {
      const files = this.files;
      for (let i = 0; i < files.length; i++) {
        if (files[i].size > 10 * 1024 * 1024) { // 10MB in bytes
          alert("File size must be less than 10MB");
          this.value = ""; // Reset the file input
        }
      }
    });
  }
});

​

• Insert the code into the "Footer Code" section.
• Ensure it is wrapped in a <script> tag before adding it to your Webflow settings.

​

3. Publish Your Project

• Publish your project to make sure the changes take effect. You need to publish for custom code to be active.

​

4. Test the Functionality

• Test the file upload on the live site to ensure the alert appears when a user tries to upload a file larger than 10MB.

​

Summary

To limit the file upload size to less than 10MB in Webflow, add custom JavaScript code to your project's "Footer Code" section. This will trigger an alert if a file larger than 10MB is uploaded and reset the input field. Publish your project to apply the changes.