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()
      }

我希望流程如下：

单击表单按钮
已打开表单模式
填写的“名称/描述”字段
点击了图像按钮
Cloudinary小部件打开
用户上传图片。
成功上传将关闭小部件，并返回带有图像预览的表单。
用户单击“提交”提交表单，然后将数据发送到后端/ Cloudinary。

我也欢迎Cloudinary的其他替代方案。

Answer 1

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

看看： Image widget uploader

Answer 2

试试这个：

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

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

2 个答案: