Explicit

Add transformations to an existing video in Cloudinary

by Shirly Manor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<table>
<tr>
  <td>Cloud Name <font color=red>*</font></td>
  <td><input type="text" id="cloud_name"></td>
</tr>
<tr>
  <td>API Key <font color=red>*</font></td>
  <td><input type="text" id="api_key" ></td>
</tr>
<tr>
  <td>Api Secret <font color=red>*</font></td>
  <td><input type="text" id="api_secret" ></td>
</tr>
<tr>
  <td>public id <font color=red>*</font></td>
  <td><input type="text" id="public_id"></td>
</tr>
<tr>
  <td>Raw transformation <font color=red>*</font></td>
  <td><input type="text" id="transformation"></td>
</tr>
</table>
<button id="submit">Process</button><br/>
<div id="response"></div>

JavaScript

$(function(){
	$('#submit').click(function(){
  	var cloud_name = $('#cloud_name').val();
    var api_key = $('#api_key').val();
    var api_secret = $('#api_secret').val();
    var public_id =  $('#public_id').val();
    var transformation =  $('#transformation').val();
    var timestamp = parseInt(Date.now()/1000);
    data = {
      timestamp: timestamp,
      public_id: public_id,
			type: "upload",
			eager: transformation,
			eager_async: true
    }
    var params_to_sign = [];
    for (var d in data) { params_to_sign.push([d, data[d]].join("=")) }
    var str_to_sign = params_to_sign.sort().join("&").concat(api_secret);
    var signature = CryptoJS.SHA1(str_to_sign).toString(CryptoJS.enc.Hex);
    data.api_key = api_key;
    data.signature = signature;
		$.ajax({
			type: 'POST',
      url: `https://api.cloudinary.com/v1_1/${cloud_name}/video/explicit`,
      data: data,
      success: function(data) {
        console.log(data);
        for (var key in data){
        	$('#response').append(
         		`<strong>${key}:</strong> ${key == "eager" ? `${data[key][0].status} - ${data[key][0].url}` : data[key]}<br/>`
	        );
        }
      },
      error: function(error) {
        console.log('there was an error');
      }
    });
  })	
})