Загрузка файла Redux-Form после асинхронной проверки

У меня есть компонент FileUpload, который подключен через поле redux-form. Он вызывает input.onChange и input.onBlur с выбранным файлом в виде строки base64, когда файл выбран в поле ввода.

Я использую опцию asyncValidator redux-form для проверки размеров изображения, и я хотел бы, чтобы файл был загружен на мой сервер после завершения асинхронной проверки.

Кажется, не задокументирован какой-либо хук afterAsyncValidation. Как лучше всего добиться этого в сокращенной форме?


react-redux redux-form react-redux-form
person eNddy    schedule 16.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

redux-form был разработан с мыслью, что ваши данные будут сохраняться на сервере при submit.

Однако ничто не мешает вам поставить для этого собственное предложение .then() после асинхронной проверки. Что-то вроде этого?

// 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)
person Erik R.    schedule 16.02.2017
comment
Предположим, я добавляю в свою форму еще одну асинхронную проверку. Разве это не запускает все проверки асинхронности снова, что приводит к повторной загрузке файла? - person eNddy; 22.03.2017
comment
Да, поэтому asyncValidate не используется по назначению. - person Erik R.; 22.03.2017
comment
@ErikR. есть ли способ заставить его выполнять отправку HTML с целевым iframe, чтобы мы могли поддерживать старые браузеры? - person Andy; 14.07.2017
comment
@Andy Вы можете отправлять старые формы, сколько хотите. Это как бы обходит стороной преимущества redux-form, но .... - person Erik R.; 20.07.2017
comment
@ErikR. Я придумал полу-хакерское решение, в котором мой обратный вызов onSubmit сначала вызывает handleSubmit, введенный redux-form для проверки, затем снова вызывает form.submit() с флагом, установленным для обхода handleSubmit, так что preventDefault() не вызывается и отправляется старомодная форма. . (Наряду с использованием цели iframe, чтобы не было перезагрузки страницы). Все это было сделано для поддержки загрузки файла. - person Andy; 20.07.2017
comment
@ErikR. что на самом деле будет делать ваша upload функция выше? Разве это не должно быть что-то новое, что невозможно в старых браузерах? - person Andy; 20.07.2017