在选择照片之前提交云小部件

Question

我有一个表单，其中用户的产品数据将根据他们之前输入的产品信息进行预定义 - 我基本上希望允许他们在那里编辑产品。

在我的编辑产品页面上，我似乎无法使用那里的小部件选择要上传的图像，它就像一个提交按钮，只是在我单击上传时提交，甚至不让我添加图像。

这是我的表格：

<form method="GET" action="/submitEdit" style="border: 2px solid black">

<h1>Edit a product</h1>

<input type="hidden" id="ogItem" name="ogItem" value="<%= itemName %>" style="border: 1px solid black" >

</script>
<fieldset>
<legend><a href="/help-center"><span class="number">?</a></span>Enter The Following Details</legend>
<label for="productName">Product Name:</label>
<input type="text" id="item" name="item" placeholder="<%= itemName %>" value="<%= itemName %>" style="border: 1px solid black" required>

<label for="productPrice">Price:</label>
<input type="text" id="price" name="price" placeholder="<%= itemPrice %>" value="<%= itemPrice %>" style="border: 1px solid black" required>
<!-- <label for="productCategory">Category:</label>
<input type="text" id="category" name="category" placeholder="Socks" style="border: 1px solid black"equired> -->

<input type="text" id="size[]" name="size[]" placeholder="CURRENT SIZES: <%= itemSize %>" value="<%= itemSize %>" style="border: 1px solid black" readonly>
<label for="productSizes">SIZES (OPTIONAL):</label>
<label for="check-1">Extra Small</label>
<input type="checkbox" name="size[]" id="extra-small" value="xs">
<label for="check-1">Small</label>
<input type="checkbox" name="size[]" id="small" value="small">
<label for="check-1">Medium</label>
<input type="checkbox" name="size[]" id="medium" value="medium">
<label for="check-1">Large</label>
<input type="checkbox" name="size[]" id="large" value="large">
<label for="check-1">Extra Large</label>
<input type="checkbox" name="size[]" id="extra-large" value="xl">

<!-- submit image -->
<button id="upload_widget" class="cloudinary-button">Upload Product Image</button>

<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  
<script type="text/javascript">  
var myWidget = cloudinary.createUploadWidget({
cloudName: 'piersolutions', 
uploadPreset: 'ld3l7evv'}, (error, result) => { 
if (!error && result && result.event === "success") { 
console.log('Done! Here is the image info: ', result.info); 
console.log(result.info.secure_url)
var result_url = result.info.secure_url;
console.log("result url is " + result_url)
document.getElementById("url").value = result_url;
}
}
)
document.getElementById("upload_widget").addEventListener("click", function(){
myWidget.open();
}, false);
</script>
<!-- submit image end -->
<input type="text" name="url" id="url" value="<%= ogImgUrl %>" readonly>
<input id="myImg" type="button" src="<%= ogImgUrl %>" alt="ORIGINAL PRODUCT IMAGE" value="See Current Image" width="300" height="200">
<img src="https://img.icons8.com/material-sharp/24/000000/visible.png"/>

</fieldset>
<fieldset>
<label for="bio">Description:</label>
<textarea id="bio" name="description" placeholder="" value="<%= itemDesc %>" style="border: 1px solid black"><%= itemDesc %></textarea>
</fieldset>
<button id="submitButton" type="submit">Submit</button>
</form>

<!-- help box on right -->
<br style="margin-top: 20px;">
<form class="form2" action="/" method="post" style="border: 2px solid black;">
<fieldset>

<h3 style="margin-top: 50px;">More Information!</h3>
<h5>For more information on how to edit a product on your webiste, you can check out our help form <a href="/helpAddpProducts" style="color: #000; font-size: 15px;">HERE</a>!You can also send us an email, or call us for more help! Find contact information on our contact info page <a style="color: #000; font-size: 15px;" href="/contactInfo">HERE!</a> </h5>

</form>

这真的很奇怪，而且令人沮丧，因为使用我拥有的仪表板的人无法编辑那里的产品。 请帮忙!!提前致谢:)

Answer 1

您应该能够通过将myWidget.open()中的files参数作为您希望由小部件上传并直接跳到裁剪步骤的图像 URL 数组来实现您的目标，如果您在使用cloudinary.createUploadWidget()启动小部件时启用了它。

在代码更改方面，您应该将cropping: true添加到cloudinary.createUploadWidget()参数列表中，并且如果您希望从此处显示的列表中添加任何其他裁剪参数。

此外，您还需要按如下方式修改myWidget.open()：

myWidget.open({files: ["https://my.domain.com/my_example_image.jpg"]});