Sending the attached file in the form

[OlehChynchyk]

Hello everyone, I have a question related to forms in Hubspot, or rather when attaching a file. Perhaps someone has come across such tasks. I created a form at app.hubspot.com/forms and linked fields and the form works from Hubspot. But when submitting from the website, I get a 400 error. (Both when submitting with no file (left) and with it (right))

import * as z from 'zod';

import { Endpoints, getErrors, getBody } from '@CORE/utils/http';

import React, { useState } from 'react';

import ButtonRounded from '@CORE/components/buttons/button-rounded';

import { FORMS } from '@CORE/constants';

import Text from '@CORE/components/texts/text';

import cn from 'classnames';

import styles from './ContactActivationForm.styles';

import { useForm } from 'react-hook-form';

import useHttp from 'use-http';

import { zodResolver } from '@hookform/resolvers/zod';

const initialSchema = {

  attach_creative: z.unknown(),

};

const ContactActivationForm = ({

  formId = FORMS.CONTACT_ACTIVATION_FORM,

  theme = 'light',

  isNewsPage = false,

}) => {

  const [schema, setSchema] = useState(z.object({ ...initialSchema }));

  const { register, handleSubmit, setError } = useForm({

    resolver: zodResolver(schema),

  });

  const [form, setForm] = useState({ done: false });

  const { post } = useHttp(Endpoints.email(formId));

  const onSubmit = async form => {

    const response = await post(getBody(form));

    if (response && !response.errors) {

      setForm({ data: form, done: true });

    }

    const httpErrors = getErrors(response.errors);

    if (httpErrors.INVALID_EMAIL) {

      setError('email', { type: 'manual', message: httpErrors.INVALID_EMAIL });

    }

  };

  return (

    <div

      className={cn(

        styles.main,

        styles[theme],

        Boolean(isNewsPage) && styles.mainLight,

      )}

      id={'contact-activation-form'}

    >

      <div className={cn(styles.right)}>

        <div className={cn(styles.wrap, { [styles.wrapCenter]: form?.done })}>

          {!form?.done && (

            <div className={styles.block}>

              <form

                className={styles.form}

                onSubmit={handleSubmit(onSubmit)}

                noValidate

              >

                <div className={styles.uploaderWrapper}>

                  <div className={styles.uploaderInner}>

                    <Text className={styles.titleUpload}>

                      Attach creative (optional)

                    </Text>

                    <div className={styles.customUploaderWrapper}>

                      <label className={styles.fileUpload}>

                        <input

                          ref={register}

                          type="file"

                          name="attach_creative"

                        />

                        <Text className={styles.textUpload}>

                          Attach creative

                        </Text>

                      </label>

                    </div>

                  </div>

                </div>

                <div className={styles.submit}>

                  <ButtonRounded

                    className={styles.button}

                    label={'Submit'}

                    theme={'dark'}

                    type={'submit'}

                  />

                </div>

              </form>

            </div>

          )}

        </div>

      </div>

    </div>

  );

};

export default ContactActivationForm;

[dennisedson]

This looks like something @tjoyce might be able to help with