Redux-Form file upload after async validation

Question

I have a FileUpload component that is connected through a redux-form Field. It calls input.onChange and input.onBlur with the selected file as a base64 string when a file is selected in an input field.

I'm using the asyncValidator redux-form option to validate the dimensions of the image, and I would like the file to be uploaded to the my server after the async validation has finished.

There doesn't seem to be any sort of afterAsyncValidation hook documented. What is the best way to accomplish this in redux-form?

Answer 1

redux-form was designed with the idea that your data would be saved to the server on submit.

However, there's nothing stopping you from putting your own .then() clause after your async validation to do that. Something like this?

// async function you already have that is looking at your
// picture field and rejecting the promise with errors
import validateDimensions from './validateDimensions'

// async function to upload the image
import upload from './uploadImage'

const MyForm = reduxForm({
  form: 'myForm',
  asyncValidate: values =>
    validateDimensions()
      .then(() => {
        // we know validation passed
        upload(values.prettyPicture)
        // ^ not "return upload(values.prettyPicture)" to let this async
        // validation promise resolve and do upload asynchronously
        // after it has resolved
      })
  },
  asyncBlurFields: [ 'prettyPicture' ]
})(MyForm)