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?

Erik R. · Accepted Answer · 2017-02-16 18:24:00Z

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)

answered Feb 16, 2017 at 18:24

Erik R.

7,2921 gold badge32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shoebie Over a year ago

suppose I add another async validation to my form. Doesn't this run all async validations again, thus, causing the file to be re-uploaded again?

Erik R. Over a year ago

Yes, which is why it is not the intended use of asyncValidate.

Andy Over a year ago

@ErikR. is there any way to get it to perform HTML submission with a target iframe so that we can support old browsers?

Erik R. Over a year ago

@Andy You can do old-fashioned form submission all you want. It sort of side-steps the benefits of redux-form, but....

Andy Over a year ago

@ErikR. I came up with a semi-hacky solution where my onSubmit callback first calls handleSubmit injected by redux-form to validate, then calls form.submit() again with a flag set to bypass handleSubmit so that that preventDefault() doesn't get called and old-fashioned form submission goes through. (Along with using a target iframe so that there's no page reload). This was all for the sake of supporting a file upload

|

Collectives™ on Stack Overflow

Redux-Form file upload after async validation

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related