File Uploads (formData) support/examples

[VaZark]

I just created a form wizard with the help of this wonderful little library.

I'm having a spot of trouble setting up the wizard to return/use formData so that can I use the data as is for the submit Call.

I copied the FieldUpload from the examples (here) but I am running into the a DOMException whenever I try uploading a file. The error returned on the console is An attempt was made to use an object that is not, or is no longer, usable.

Clearly I'm missing something. Can someone clarify how to use FileFields (or formData) with Formiz to upload files instead of just a JSON pls?

Form

                    <FormizStep name="dev" label="Dev">
                        <Grid templateColumns="repeat(4, 1fr)" paddingX={2} gap={2}>
                            <GridItem colSpan={4}>
                                <FileField
                                    name="rib"
                                    label="RIB"
                                />
                            </GridItem>
                        </Grid>
                    </FormizStep>

FileField.js

import React, { useState } from "react";
import { useField } from "@formiz/core";
import { Flex } from "@chakra-ui/react";


const FileField = (props) => {
  const {
    errorMessage,
    id,
    isValid,
    isPristine,
    isSubmitted,
    resetKey,
    setValue,
    value,
  } = useField(props)
  const { label, required } = props
  const [isFocused, setIsFocused] = useState(false);
  const showError = !isValid && !isFocused && (!isPristine || isSubmitted)

  const handleChange = ({ target }) => {
    const file = target.files[0];

    if (!file) {
      setValue(null);
      return;
    }

    setValue({
      name: file.name,
      size: file.size,
      type: file.type,
      lastModified: file.lastModified,
      lastModifiedDate: file.lastModifiedDate,
      file,
    }); 
  };


  return (
    <Flex direction="column" gap="1" >
      <label
        className="demo-label"
        htmlFor={id}
      >
        {label}
        <span className="text-red-600">{required && ' *'}</span>
      </label>
      <input
        key={resetKey}
        id={id}
        type="file"
        value={value || ''}
        className="field"
        onChange={handleChange}
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
        aria-invalid={!isValid}
        aria-describedby={!isValid ? `${id}-error` : null}
      />
      {showError && (
        <>
          <div></div>
          <div id={`${id}-error`} className="text-error">
            {errorMessage}
          </div>
        </>
      )}
    </Flex>
  )
}

export default FileField

[ivan-dalmet]

Hi @VaZark, that's weird, I don't see the issue in the code you provided.
Do you have a CodeSandbox available with the bug?