How can we utilize the upload response when using the jQuery uploader?

For every POST request Cloudinary returns a JSON response, containing all the relevant data, to the client side.

In order to use this response, extract essential information and store it your database or present it your end-users, you must bind to the `cloudinarydone` event.

For example, if your uploader code looks like this:

<input name="file" type="file" class="cloudinary-fileupload" data-cloudinary-field="image_id" data-form-data=" --- Data-JSON --- "></input>

Then the following code will print the upload-response:

$('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {
  console.log(data);
  return true;
});

Other use-cases can include, database maintenance, upload thumbnails display, logging, etc.

Have more questions? Submit a request

Comments

  • Avatar
    Andres Vargas

    Hi,

    Is there a way to store this JSON response "data" into a php array so that I can POST it when I submit the form?

    I've been trying and no luck on how to convert this Javascript to PHP.

  • Avatar
    Nadav Ofir

    You can use the identifier that is injected to the form as a hidden field once the upload is done, and send it upon submission. More information is available here: http://cloudinary.com/documentation/php_image_upload#direct_upload_file_tag

  • Avatar
    Andres Vargas

    Yes, I understand thank you.

    Is there anyway to set the hidden field value to the "public_id" value instead?

    I can see hidden field currently sets the value to the image path i.e "image/upload/v1478772086/anzfiijfgtlsuclt9kgz.jpg#84505ad7aa54df14a08f61c144f9e1fa3f899247"

    I think it's better if I could store the public_id in my database instead to apply image transformations easier?

  • Avatar
    Andres Vargas

    I'm guessing the function (cl_form_tag) in the Helpers.php file would have to be modified?

  • Avatar
    Nadav Ofir

    You can use the PreloadedFile class to achieve that separation. E.g.:

    $preloaded = new \Cloudinary\PreloadedFile("image/upload/v1234567890/sample.jpg#abcd");
    echo $preloaded->public_id;

  • Avatar
    Andres Vargas

    Ok thanks.

    I'm actually posting the form as an image[] array because I'm uploading various images at once before I submit the form. I've tried to use the PreloadedFile class but it doesn't accept arrays. Is there a way for it to accept my array of $_POST['image_id']?

  • Avatar
    Nadav Ofir

    Hi Andres,
    PreloadedFile is type that represents a single resource. You'll have to iterate through your uploaded images and parse each one separately.

  • Avatar
    Andres Vargas

    Hi Nadav,
    Thanks for your help! I have been able to succesfully get this running :)

    Here is my code for anyone else needing this.

    < ? php

    echo cloudinary_js_config();

    if(isset($_POST['image_id'] )){

    foreach($_POST['image_id'] as $value){
    $preloaded = new \Cloudinary\PreloadedFile($value);
    if (!$preloaded->is_valid()) {
    echo "Invalid upload signature";
    } else {
    $photo_id = $preloaded->public_id;
    echo "You have uploaded this image: ";
    echo cl_image_tag($photo_id, array("format" => "jpg", "crop" => "fill", "width" => 120, "height" => 80));
    echo " < b r > ";
    }

    }
    }

    ? >

    Edited by Andres Vargas
Powered by Zendesk