Облачный виджет для загрузки изображений в форме - PullRequest
0 голосов
/ 04 июля 2019

У меня есть компонент формы для создания / обновления списка воспроизведения.Это включает в себя некоторые поля ввода, такие как «Имя» и «Описание».У меня также есть кнопка загрузки изображения, которая открывает 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()
      }

Мне бы хотелось, чтобы процесс был следующим:

  1. Нажата кнопка формы
  2. Открыта модальная форма
  3. Поля имени / описаниязаполнено
  4. Нажата кнопка изображения
  5. Открывается облачный виджет
  6. Пользователь загружает изображение.
  7. При успешной загрузке виджет закрывается, обратно в форму с предварительным просмотром изображения.
  8. Пользователь нажимает «Отправить», чтобы отправить форму, отправив данные в бэкэнд / Cloudinary.

Я открыт и для других альтернатив Cloudinary.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...