Skip to main content

How to dynamically change the payload of a jQuery direct upload request?



  • Joshua Chaitin-Pollak

    does the data-form-data attribute need to be set as well at this point, or can we skip that if we are setting the formData manually?

  • Tal Lev-Ami

    If formData is given via the fileupload method, the data-form-data attribute can be discarded.

  • Joshua Chaitin-Pollak

    I got it working like this...

    HTML (inserted dynamically):

    <input name="file" type="file" class="cloudinary-fileupload" data-cloudinary-field="image\_id" ></input>

    Javascript after the HTML insert:


                                    formData: data.params,

                                    url : data.url,

                                    headers: {"X-Requested-With": "XMLHttpRequest"}


  • Andrés Javier López

    Hey Itay , could you comment with a real example with dummy data? i dont get it 

  • Andrés Javier López

    I get it work, the problem is that you MUST specificy the URL



    formData: data,

    url: '',

    start: function (e) {

    console.log("Starting upload...");


    fail: function (e, data) {

    console.log("Upload failed, errorThrown: "+ data.errorThrown +" TextStatus: "+data.textStatus+ " jqXHR: "+ data.jqXHR );




  • Itay Taragano

    Hi Andrés,

    The fileupload example was for updating an existing initialized file field.

    To create a new field configured to upload to Cloudinary, the cloudinary_fileupload method should be used and it automatically builds the upload URL correctly (

  • TJ Eastmond

    Hello Itay,

    Can you spot any reason why I keep getting the Unknown API Key error?

    <!DOCTYPE html><html>

    <head><title>User Demo</title>

    <link rel="stylesheet" href="/stylesheets/style.css">

    <script src="//"></script>

    <script src="//"></script>

    <script src="/javascripts/libs/jquery.ui.widget.js"></script>

    <script src="/javascripts/libs/jquery.iframe-transport.js"></script>

    <script src="/javascripts/libs/jquery.fileupload.js"></script>

    <script src="/javascripts/libs/jquery.cloudinary.js"></script>

    <script src="/javascripts/user.js"></script>




    <h1>Upload Test</h1>

    <input type="file" id="cloudinary-upload" data-cloudinary-field="image\_upload" data-form-data="" class="cloudinary-fileupload">

    <div class="preview"></div>

    <script>var opts = {

    timestamp: 1381940936,

    callback: http://localhost:3000/cloudinary_cors.html,

    signature: 5b90da23063f9f03f8078427411440fe9c1af6fc,

    api_key: 'APIKEY'






  • TJ Eastmond

    Sorry...that was the wrong sample...


    <!DOCTYPE html><html><head><title>User Demo</title><link rel="stylesheet" href="/stylesheets/style.css"><script src="//">

    </script><script src="//">

    </script><script src="/javascripts/libs/jquery.ui.widget.js">

    </script><script src="/javascripts/libs/jquery.iframe-transport.js">

    </script><script src="/javascripts/libs/jquery.fileupload.js">

    </script><script src="/javascripts/libs/jquery.cloudinary.js">

    </script><script src="/javascripts/user.js">


    $.cloudinary.config({cloud_name: 'de3aiolw6',api_key: "799755992284774"});

    </script><h1>Upload Test</h1><input type="file" id="cloudinary-upload" data-cloudinary-field="image\_upload" data-form-data="" class="cloudinary-fileupload"><div class="preview"></div><script>

    var opts = {

    timestamp: "1381941597",

    callback: "http://localhost:3000/cloudinary_cors.html",

    signature: "c76bc740df464649306cf9433ca353fb279b77b5",

    api_key: '799755992284774'



    formData: opts,

    url: ""



  • Itay Taragano

    Hi T J

    The call to $('#cloudinary-upload').fileupload needs to be inside $(function(){...}) .

    Another option is that $('#cloudinary-upload').cloudinary_fileupload should be used.

    Let me know if it works for you?

  • TJ Eastmond

    I had figured it out. Was a stupid mistake on my part. Thanks though!

  • Bruce Norton

    Would it be possible to have a complete, working example, ideally with a demo?
    It may be just me, but I keep getting confused between the php, BlueImp and Cloudinary file uploads.
    I would like to add form info to the meta data (context) & tags before uploading images.
    See upload.js:

    The following doesn't seem to work.

    <code>let newContext = '|credits=Me New Context';

    dropZone: '#direct_upload',
    context: newContext,...</code>

  • Bruce Norton

    Or, how can we do it using php?
    When I load the following dynamically, I get a 401, bad request error:

    $email, "credits" => $credit);
    echo cl_image_upload_tag('test', array("tags" => "direct_photo_album, testing", "context" => $context, "callback" => $cors_location, "html" => array("multiple" => true)));

  • Nadav Ofir

    Hi Bruce,

    Something like the following should do the job:

    cl_image_upload_tag("test", array("context" => array("key1" => "value1", "key2" => "value2"))); 

    If you're still getting 401 errors please open a support ticket and we'll be happy to look deeper into your specific case.

  • Sean Smith

    Why is this information nowhere to be found in Cloudinary's official jQuery documentation? It always seems to be that the information you're looking for is never in Cloudinary's documentation but buried in a support blog post.

  • Marissa Masangcay

    Hi Sean,

    Thank you for your honest feedback - we do appreciate it. We will most definitely take this into consideration as an improvement for our documentation.


Please sign in to leave a comment.