Cloudinary authorization with direct upload

Question

I created a working clientside upload script for cloudinary. The important part of the upload:

<?php
    $cloudName = "...";
    $apiKey = "...";
    $time = time();
    $apiSecret = "...";
    $fileName = "...";
?>              
<form action="https://api.cloudinary.com/v1_1/<?php echo $cloudName;?>/image/upload" method="post" enctype="multipart/form-data">
    <label for="file">Filename:</label>
    <input type="file" name="file" id="file"><br>
    <input type="hidden" name="signature" value="<?php echo sha1('public_id='.$fileName.'&timestamp='.$time.$apiSecret);?>" />
    <input type="hidden" name="api_key" value="<?php echo $apiKey; ?>"/>
    <input type="hidden" name="timestamp" value="<?php echo $time; ?>" />
    <input type="hidden" name="public_id" value="<?php echo $fileName; ?>" />
    <input type="submit" name="submit" value="Submit">
</form>

Now I want to add a transformation to the upload, so the uploads are transformed before they are stored (to save storage space).

I tried adding the following code (where resize is a transformation I created in my cloudinary account).

<input type="hidden" name="transformation" value="resize" />

But a request with a transformation field results in a 401 unauthorized error. I suppose I have to do something with the signature, but what?

Answer 1

You can use the cl_form_tag from the cloudinary PHP client library to build the form with all the input tags. However, you might want to use the jQuery direct upload which gives you better control and is more customizable UI-wise. See here. If you can't use the PHP client library for some reason there are two issues in the code:

1. A named transformation can be used by prefixing it by t_. So the value of the transformation field should be t_resize.
2. The transformation parameter needs to be added to the signature. Note that the parameter names need to be in alphabetical order when signed.