Как в приложении react+redux реализовать отправку картинки?

Question

[gallantalex]

Есть проект на Реакт+редакс. И на одной форме нужно реализовать добавление картинки. Эти данные из формы будут отправляться на сервер. Если с простыми типами данных все понятно: я из полей формы извлекаю строки, передаю их в action creator, и оттуда эти данные отправляются на сервер, а также сохраняются в глобальном стейте. А вот файл я же не могу передать в action creator. Как поступать в таком случае?

Answer 1

[Максим]

Почему не можете? Это же тоже обычное поле формы.
Посмотрел старый проект, где это делал. Было так:

...
const request = require('superagent-bluebird-promise')
...
export function addProduct(formData) {
  return dispatch => {
    dispatch({ type: PRODUCT_ADD_REQUEST })
    if (formData.image) {
      return request.post(`${API_ROOT_V1}/api/v1/products/add`)
        .field('name', formData.name)
        .field('price', formData.price)
        .field('description', formData.description)
        .field('providerId', formData.providerId)
        .attach('image', formData.image, formData.image.name) // добавление картинки
        .then(...) // здесь дальнейшая обработка в случае успеха
    } else { // кейс, когда у товара нет картинки
      return request.post(`${API_ROOT_V1}/api/v1/products/add`)
        .send(formData)
        .then(...)
    }
  }
}

В коде компонента formData формирую так:

... 
// (обработчик сабмита формы)
this.props.addProduct({
      name,
      price,
      description,
      image: findDOMNode(this.refs.image).files[0], // (забираю картинку)
      providerId: this.props.providerId,
    })
...

// непосредственно кнопка загрузки файла в форме
<div className='form-group'>
          <input
            id='productImage'
            type='file'
            name='image'
            placeholder='Image'
            onChange={this.handleChange}
            value={this.state.image}
            data-field-name='image'
            ref='image' />
          <p>Load product image</p>
        </div>
...

Comments

[gallantalex]

А можете поподробнее объяснить что за formdata? Вы как-то форму целиком передаете в actionCreator

[Максим]

gallantalex обновил ответ!