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




  • Avatar
    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?

  • Avatar
    Tal Lev-Ami

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

  • Avatar
    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"}


  • Avatar
    Andrés Javier López

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

  • Avatar
    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 );




  • Avatar
    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 (

  • Avatar
    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'






  • Avatar
    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: ""



  • Avatar
    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?

  • Avatar
    TJ Eastmond

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

  • Avatar
    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>

  • Avatar
    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)));

  • Avatar
    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.

Please sign in to leave a comment.