Почему не можете? Это же тоже обычное поле формы.
Посмотрел старый проект, где это делал. Было так:
...
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>
...
Средний