Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Client side signed uploads with pure Javascript and PHP
<h1>Upload to Cloudinary with FormData</h1>
<form action="" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
<legend>Upload example</legend>
<label >Select your photo:
<input type="file" name="file"></label>
<input type="submit" value="Submit" />
<img id="uploaded">
<div id="results"></div>
$cloud_name = "cloud_name";
$api_key = "api_key";
$api_secret = "api_secret";
$timestamp = time();
$signature = sha1("timestamp=".$timestamp.$api_secret);
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);"post", "<?php echo $cloud_name ?>/image/upload");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment