taragano/cloudinary-php-pure_javascript.php

## cloudinary-php-pure_javascript.php
<html>
  <body>
    <h1>Upload to Cloudinary with FormData</h1>
    <form action="" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
      <fieldset>
        <legend>Upload example</legend>
        <p>
          <label >Select your photo:
          <input type="file" name="file"></label>
        </p>
        <p>
          <input type="submit" value="Submit" />
        </p>
        <img id="uploaded">
        <div id="results"></div>
      </fieldset>
    </form>

    <?php
      $cloud_name = "cloud_name";
      $api_key = "api_key";
      $api_secret = "api_secret";
      $timestamp = time();
      $signature = sha1("timestamp=".$timestamp.$api_secret);
    ?>

    <script>
        window.ajaxSuccess = function () {
    	    response = JSON.parse(this.responseText);
          console.log("ajaxSuccess", typeof this.responseText);
          document.getElementById('uploaded').setAttribute("src", response["secure_url"]);
          document.getElementById('results').innerText = this.responseText;
        }

        window.AJAXSubmit = function (formElement) {
          console.log("starting AJAXSubmit");
          var xhr = new XMLHttpRequest();
          xhr.onload = ajaxSuccess;
          var formData = new FormData(formElement);
          formData.append("timestamp", <?php echo $timestamp ?>);
          formData.append("signature", "<?php echo $signature ?>");
          formData.append("api_key", <?php echo $api_key ?>);
          console.log(formData);
          xhr.open("post", "https://api.cloudinary.com/v1_1/<?php echo $cloud_name ?>/image/upload");
          xhr.send(formData);
        }
    </script>
  </body>
</html>
	<html>
	<body>
	<h1>Upload to Cloudinary with FormData</h1>
	<form action="" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
	<fieldset>
	<legend>Upload example</legend>
	<p>
	<label >Select your photo:
	<input type="file" name="file"></label>
	</p>
	<p>
	<input type="submit" value="Submit" />
	</p>
	<img id="uploaded">
	<div id="results"></div>
	</fieldset>
	</form>

	<?php
	$cloud_name = "cloud_name";
	$api_key = "api_key";
	$api_secret = "api_secret";
	$timestamp = time();
	$signature = sha1("timestamp=".$timestamp.$api_secret);
	?>

	<script>
	window.ajaxSuccess = function () {
	response = JSON.parse(this.responseText);
	console.log("ajaxSuccess", typeof this.responseText);
	document.getElementById('uploaded').setAttribute("src", response["secure_url"]);
	document.getElementById('results').innerText = this.responseText;
	}

	window.AJAXSubmit = function (formElement) {
	console.log("starting AJAXSubmit");
	var xhr = new XMLHttpRequest();
	xhr.onload = ajaxSuccess;
	var formData = new FormData(formElement);
	formData.append("timestamp", <?php echo $timestamp ?>);
	formData.append("signature", "<?php echo $signature ?>");
	formData.append("api_key", <?php echo $api_key ?>);
	console.log(formData);
	xhr.open("post", "https://api.cloudinary.com/v1_1/<?php echo $cloud_name ?>/image/upload");
	xhr.send(formData);
	}
	</script>
	</body>
	</html>