File Upload Paid Plan

HAPI Forms accepts file upload when visitor submitted the form. Please make sure the form's upload feature is enabled.

Please take note that in order to upload the file, you will need to set the header to Content-Type: multipart/form-data.

document.addEventListener("DOMContentLoaded", () => {
        const input = document.querySelector("#files");
        window.pond = FilePond.create(input);
      });

      document.addEventListener("alpine:init", () => {
        Alpine.data("form", () => ({
          endpoint: "https://app.hapiforms.com/api/d7c65529-438c-48e0-afb1-0c70f920838a",
          fields: {},
          errors: {},
          openMsg: false,
          showEndpoint: false,
          isBusy: false,
          submit: function () {
            this.isBusy = true;

            const formData = new FormData();

            formData.append("name", this.fields.name);
            formData.append("email", this.fields.email);
            formData.append("phone", this.fields.phone);

            pond.getFiles().forEach((file, i) => {
              formData.append(`files[${i}]`, file.file, file.name);
            });

            axios
              .post(this.endpoint, formData)
              .then((res) => {
                // Reset fields and errors
                this.fields = {};
                this.errors = {};

                // Disable isBusy
                this.isBusy = false;

                // Redirect to...
                window.location.href = "./thank-you.html";
              })
              .catch((err) => {
                // Show the errors
                this.errors = err.response.data.errors;

                // Disable isBusy
                this.isBusy = false;
              });
          },
        }));
      });

This example uses Filepond JS, Alpine JS and Axios JS.

Size limit

The maximum total files size limit is 24 MB. Most email service providers accept from 20-25 MB but we restrict it to 24 MB to prevent unwanted behaviour during sending an email notification to users.

Recap

As we can see, if we need to use file upload, it's slightly different compared to the previous page. What we need is to set the header to multipart/form-data and append fields and files by initializing FormData() object.