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

Posted 2023-03-25

【中文标题】cloudinary 小部件在选择照片之前提交

【英文标题】：cloudinary widget submitting before selecting photo

【发布时间】：2021-04-24 09:39:33

【问题描述】：

我有一个表单，用户的产品数据将根据他们之前输入的产品信息进行预定义——我基本上是想让他们在那里编辑产品。

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

这是我的表格：

 <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 %>"  value="See Current Image"  >
        <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>

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

【参考方案1】：

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

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

另外，你需要修改myWidget.open()如下：

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