JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/cloudinary/cloudinary_js/master/js/jquery.ui.widget.js"></script>
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.iframe-transport.js"></script>
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.cloudinary.js"></script>
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.fileupload.js"></script>
<script src="https://rawgit.com/cloudinary/pkg-cloudinary-jquery-file-upload/master/cloudinary-jquery-file-upload.js"></script>
<h1>Upload file with Coudinary's jQuery plugin</h1>

<form>
  <div class="form_line">
    <label>Image:</label>
    <div class="form_controls">
      <div class="upload_button_holder">
        <input type="file" name="file" class="cloudinary_fileupload" multiple>
      </div>
    </div>
  </div>
</form>
<div class="gallery"/>
</div>

CSS

.gallery {
  margin: 10px;
}

JavaScript

const cloudName = 'aditimadan';
const apiKey = '549185954311254';
const unsignedUploadPreset = 'unsigned';

$.cloudinary.config({
  cloud_name: cloudName,
  api_key: apiKey
})

$('.cloudinary_fileupload').unsigned_cloudinary_upload(unsignedUploadPreset, {
    cloud_name: cloudName,
    tags: 'browser_uploads'
  }, {
    multiple: true
  }
  )
  .bind('cloudinarydone', function(e, data) {
    console.log(`data.loaded: ${data.loaded},
  data.total: ${data.total}`)
  })
  .bind('fileuploadprogress', function(e, data) {
   console.log(data.loaded/data.total); 

  })
  .bind('cloudinaryprogress', function(e, data) {
    console.log(`cloudinaryprogress data.loaded: ${data.loaded},
  data.total: ${data.total}`);
  })
  .bind('cloudinarydone', function(e, data) {
    $('.gallery').prepend(`<img src="${data.result.secure_url}" />`)
  })
  ;

/*
Sample output in browser console:

cloudinaryprogress data.loaded: 1228664,
  data.total: 4620250
VM367:86 fileuploadprogress data.loaded: 1228664,
  data.total: 4620250
VM426:90 cloudinaryprogress data.loaded: 3751521,
  data.total: 4620250
VM367:86 fileuploadprogress data.loaded: 3751521,
  data.total: 4620250
VM426:90 cloudinaryprogress data.loaded: 4341280,
  data.total: 4620250
VM367:86 fileuploadprogress data.loaded: 4341280,
  data.total: 4620250
VM426:90 cloudinaryprogress data.loaded: 4620250,
  data.total: 4620250
VM367:86 fileuploadprogress data.loaded: 4620250,
  data.total: 4620250
VM339:82 data.loaded: 4620250,
  data.total: 4620250
  
*/