Cloudinary 小部件，用于在表单中上传图像

Question

我有一个用于创建/更新播放列表的表单组件。这包括一些输入字段，例如“名称”和“描述”。我还有一个图片上传按钮，可以打开 Cloudinary 小部件。问题是，一旦打开小部件，它就会自动提交我的表单。

我没有看到任何用于防止这种情况发生的 cloudinary 小部件的道具。我看到的每个使用此小部件的示例都只是上传图像，而不是与表单结合使用。

（我正在使用 Semantic UI 的 React 库进行样式设置）

这不可能吗？

//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. Cloudinary 小部件打开
6. 用户上传图片。
7. 成功上传会关闭小部件，返回到带有图像预览的表单。
8. 用户点击“提交”提交表单，将数据发送到后端/Cloudinary。

我也对 Cloudinary 的其他替代品持开放态度。

Answer 1

您设法解决了这个问题吗？
我也遇到了同样的问题，我设法使用 inlineContainer 选项

看看： Image widget uploader

Answer 2

试试这个：

<Button type="button" onClick={() => this.openWidget()}>Upload Photo</Button>