JSFiddle - React, Tailwind, and code Playground

by eitanp461

HTML

<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>
<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>

JavaScript

const cloudName = 'your cloud name';
const apiKey = 'your api key';
const unsignedUploadPreset = 'your unsigned upload preset';

$.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(`fileuploadprogress data.loaded: ${data.loaded},
  data.total: ${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
  
*/