У меня есть компонент формы для создания / обновления списка воспроизведения.Это включает в себя некоторые поля ввода, такие как «Имя» и «Описание».У меня также есть кнопка загрузки изображения, которая открывает Cloudinary Widget.Проблема в том, что после открытия виджета он автоматически отправляет мою форму.
Я не вижу никаких реквизитов для облачного виджета, которые могли бы предотвратить это.Каждый пример того, как люди используют этот виджет, просто загружает изображение, а не вместе с формой.
(для стилизации я использую библиотеку React в Semantic UI)
Разве это невозможно?
//form
<Form onSubmit={this.handleSubmit}>
<Form.Field required><label>Name</label> <input placeholder='Name' value={this.state.name} name="name" onChange={(event) => this.handleChange(event)}/></Form.Field>
<Form.TextArea label='Description' value={this.state.description}placeholder='Description' name="description" onChange={(event) => this.handleChange(event)}/>
<Form.Field >
<label>Image</label>
<Button onClick={() => this.openWidget()}>Upload Photo</Button>
{/* <input id="upload" type="file" name="image" onChange={(event) => this.handleChange(event)}/> */}
</Form.Field>
<Button type='submit'>Submit</Button>
</Form>
//button callback to open widget
openWidget = () => {
window.cloudinary.createUploadWidget(
{
cloudName: CLOUD_NAME,
uploadPreset: "u9gezupm"
},
(error, result) => {
if (result && result.event === "success") {
// debugger
this.setState({
image: `https://res.cloudinary.com/${CLOUD_NAME}/image/upload/${result.info.path}`, uploaded: true
});
}
}
).open()
}
Мне бы хотелось, чтобы процесс был следующим:
- Нажата кнопка формы
- Открыта модальная форма
- Поля имени / описаниязаполнено
- Нажата кнопка изображения
- Открывается облачный виджет
- Пользователь загружает изображение.
- При успешной загрузке виджет закрывается, обратно в форму с предварительным просмотром изображения.
- Пользователь нажимает «Отправить», чтобы отправить форму, отправив данные в бэкэнд / Cloudinary.
Я открыт и для других альтернатив Cloudinary.