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>
<form id="myform" method="POST">
<table>
<tr>
  <td>Cloud Name <font color=red>*</font></td>
  <td><input type="text" id="cloudname" value="promoboxx"></td>
</tr>
<tr>
  <td>API Key <font color=red>*</font></td>
  <td><input type="text" id="apikey" value=""></td>
</tr>
<tr>
  <td>Api Secret <font color=red>*</font></td>
  <td><input type="text" id="apisecret" value=""></td>
</tr>
<tr>
  <td>public id <font color=red>*</font></td>
  <td><input type="text" id="publicid" value="my_large_video"></td>
</tr>
<tr>
  <td>Raw transformation <font color=red>*</font></td>
  <td><input type="text" id="transformations" value="f_ogv"></td>
</tr>
<tr>
<td>
  <input type="submit" text="submit">
  </td>
</tr>
</table>
</form>

JavaScript

$('#myform').submit(e => {
	e.preventDefault();
  let cloudname = $('#cloudname').val();
  let apikey = $('#apikey').val();
  let api_secret = $('#apisecret').val();
  let public_id =  $('#publicid').val();
  let trans =  $('#transformations').val();
  let timestamp = parseInt(Date.now()/1000);
	console.log(apikey, cloudname);
 $.ajax({
    type: 'POST',
    url: `https://api.cloudinary.com/v1_1/shirly/image/explicit`,
    data: {
     timestamp: timestamp,
      public_id: public_id,
      type: "upload",
      eager: trans,
      eager_async: true
    },
    success: function(data) {
    	console.log(data);
      $('#ajax-json').html(data.cloudname);
      $('#ajax-html').html(data.apikey);
    },
    error: function(error) {
      alert('there was an error');
    }
  });
});
    
    
   /*  form.onsubmit = function(){
    var form = document.forms.myform,
    elem = form.elements;
    
    var cloud_name = elem.cloudname.value,
    api_secret = elem.apisecret.value,
    api_key = elem.apikey.value,
    public_id = elem.publicid.value,
    trans = elem.transformations.value,
    timestamp = parseInt(Date.now()/1000);
    
        form.action = `https://api.cloudinary.com/v1_1/${cloud_name}/image/explicit`
    data = {
      timestamp: timestamp,
      public_id: public_id,
      type: "upload",
      eager: trans,
      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: url,
      data: data,
      success: success,
      dataType: dataType
    });    
    if(!cloud_name.value || !api_secret.value || !api_key.value || !public_id.value || !trans.value){
        alert('please fill all mandatories fields');
       ...