用于表单上传图像的Cloudinary小部件

Question

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

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

（（我使用语义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

[看一下：Image widget uploader