cloudinary api

by kenwals

HTML

<html>

  <head>
    <title>Inline Test</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  </head>

  <body>
    <button id="upload_widget" class="cloudinary-button">Upload an image files</button>

    <div class="my-3">
      <label for="image" class="form-label visually-hidden">Image : </label>
      <input type="url" class="form-control visually-hidden" id="image" name="image_url">
    </div>
    <img src="https://images.unsplash.com/photo-1622131731136-4c511ae0c8eb?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="img-thumbnail" id="img-thumbnail" alt="...">


    <script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>

    <script type="text/javascript">
      var myWidget = cloudinary.createUploadWidget({
        cloudName: 'dwrholwaj',
        uploadPreset: 'clt3gdsi',
        folder: 'wildlife',
        cropping: true
      }, (error, result) => {
        if (!error && result && result.event === "success") {
          console.log(result.info.url);
          document.getElementById("image").value = result.info.url;
          document.getElementById("img-thumbnail").src = result.info.url;
          console.log(document.getElementById("image").value);
        }
      })

      document.getElementById("upload_widget").addEventListener("click", function() {
        myWidget.open();
      }, false);

    </script>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  </body>

</html>