JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<html>

  <head>

  </head>

  <body>

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

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

    <script type="text/javascript">
    
      var newName = "test"
      var publicIds= [];
      var myWidget = cloudinary.createUploadWidget({
      
      
      preBatch: (cb, data) => {
      publicIds = data.files;
      var i = 0;
       for (i; i < publicIds.length; i++) {
            publicIds[i].publicId = i+1;

          }
          cb()
     
    }, 
 prepareUploadParams: function(cb, params) {
         
          var newParams = [];
          var i = 0;
          for (i; i < publicIds.length; i++) {
          var param={};
          param.timestamp = params.timestamp;
          param.upload_preset = params.upload_preset
          param.source = params.source
          param.public_id = publicIds[i].publicId
          newParams.push(param)

          }
          cb(newParams)
        }, 
        cloudName: '<cloud name>',
        uploadPreset: "<upload preset>",
        multipule: true,
       

      }, (error, result) => {
        if (!error && result && result.event === "success") {
          console.log('Done! Here is the image info: ', result.info);
        }
      })

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

    </script>

  </body>

</html>