Redux Form: Как добавить url изображения перед тем как отправить запрос с Формой?

Question

[pepsfuzzyboots]

У меня есть форма с загрузкой изображения на Cloudinary отдельным запросом от формы. Что я хочу сделать, подцепить url из объекта ответа с Cloudinary, передать этот url в мою redux форму и вместе с остальными значениями формы (автором поста, заголовком поста и текстом поста) отправить запрос на мой сервер и сохранить в базе данных.

Пока запрос выглядит так:

onChange(event) {
   let formData = new FormData();
   formData.append('file', event.target.files[0]);
   formData.append('upload_preset', UPLOAD_PRESET);

  axios({
    url: `${COUDINARY_ROOT_URL}`,
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: formData
    }).then((res) => {
     console.log(res);

   }).catch((err) => {
     console.err(err);
   });

Суть вопроса в том, как передать url из ответа Cloudinary в форму, чтобы отправить ее на сервер?

Если это не очень хороший способ, была бы очень благодарна за советы так же. Спасибо!

Answer 1

[Роман Александрович]

Редукс форм работает по принципу view → action → middlewares → reducers → state → view. Что вам мешает собрать данные о файле и положить их в State. А затем при сабмите формы собрать все данные в кучу и написать один экшен. Я писал форму отправки фото с описанием на сервер и от вашей она думаю будет отличаться полями и апи сервера. У меня передаются все данные в экшен. В экшене первым делом ложится картинка на сервер и в ответе я получаю её id. А дальше с id картинки делайте что хотите.

Comments

[pepsfuzzyboots]

Примерно пыталась сделать что-то похожее, но руки не совсем из того места еще, поэтому не получилось толково это сделать на процессе добавления в state и собирания в кучу... Получала ответ от сервера, cloudinary в данном случае, возвращала из action-a объект с ответом от сервера с данными изображениями... Но как-то видать криво в редьюсере было написано и не заработало, буду ковыряться)
Спасибо за ответ и совет! :)