JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://res.cloudinary.com/demo/raw/upload/jquery.ui.widget_ypnflw.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/jquery.iframe-transport_ajzwk5.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/jquery.fileupload_adf5kt.js"></script>
<script src="https://res.cloudinary.com/demo/raw/upload/v1425809551/jquery.cloudinary_t0p9km.js"></script>
<p id="message">Make sure you update the cloud name (<span>cloud_name</span>) and the upload preset's name (<span>preset_name</span>) for this demo to work.</p>


<form class="upload_form">
  <label for="public_id">Enter public Id:</label>
  <input id="public_id" type="text" name="public_id"/>
  <br/>
  <label for="tags">Choose a tag:</label>

<select name="tags" id="tags">
  <option value="tag1">tag1</option>
  <option value="tag2">tag2</option>
  <option value="tag3">tag3</option>
  <option value="tag4">tag4</option>
</select>
<br/>
  <input type="file" name="file" class="upload_field">
</form>

<div class="progress_wrapper">
  <div class="progress_bar"><div class="text"></div></div>
  
</div>
<div class="thumbnails"></div>

CSS

.progress_wrapper {
  display: block;
  margin: 5px 0;
  border: 1px;
  width: 100%;
  height: 20px;
  background-color: grey;
  border-radius: 5px;
  text-align: center;
}

.progress_bar {
  width: 0px;
  height: 20px;
  background-color: #1fd94d;
  text-align: center;
  line-height: 21px;
  border-radius: 5px;
  font-size: 15px;
}

.text {
    position: absolute;
    margin: 0 auto;
    width: 100%;
}

p{
    font-size: large;
    background-color: rgb(237, 237, 225);
}

span{
    font-weight: bold;
}

JavaScript

var cloud_name = '';
var preset_name = '';

if (cloud_name != '' && preset_name != '') $('#message').remove();

$.cloudinary.config({
  cloud_name: cloud_name
})

$('.upload_field').unsigned_cloudinary_upload("", {}, {
  multiple: true
}).bind('fileuploadsubmit', function (e, data) {

	data.formData = {
  upload_preset: preset_name, 
  public_id: $('#public_id').val(),
  tags: $('#tags').val()}

}).bind('cloudinarydone', function(e, data) {
		console.log(data.result)
}).bind('cloudinaryprogress', function(e, data) {
	var percent = Math.round((data.loaded * 100.0) / data.total);
  $('.progress_bar').css('width', percent + '%');
  $('.progress_wrapper .text').text(percent + '%');
});