File Upload

Sometimes you need to upload files with your form, e.g. if you want to upload a profile picture for a user.

Use a <Field /> with the type file and you will get the FileList object back as value in the data object.

<Form validate enctype="multipart/form-data">
  <Field type="file" id="profilePicture" required />
  <Button
    id="submit"
    type="submit"
    preOnChange={value => jsImageKit(value)}
    onClick={state => {
      alert(JSON.stringify(state, null, 2))
      alert('open the console to see the whole state...')
      console.log(state)
    }}
  >
    Submit
  </Button>
</Form><Form validate enctype="multipart/form-data">
  <Field type="file" id="profilePicture" required />
  <Button
    id="submit"
    type="submit"
    preOnChange={value => jsImageKit(value)}
    onClick={state => {
      alert(JSON.stringify(state, null, 2))
      alert('open the console to see the whole state...')
      console.log(state)
    }}
  >
    Submit
  </Button>
</Form>