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

Modifying the parameters of a cloudinary-fileupload DOM element (i.e. the input field) for example, using: $(...).attr('data-form-data', data)  has no effect over the real upload payload since BlueImp pre-consumes it when the page is first loaded.

Dynamically adding/changing attributes is requires using blueImp api, as follows:

  • Providing a full hash of parameters:
    $(...).fileupload({formData: data})
  • Retrieving the current hash of parameters:
    $(...).fileupload('option', 'formData')
  • Adding the specified key & value to the parameters hash:
    $(...).fileupload('option', 'formData').key = value
  • Removing the specified key with its value from the parameters hash:
    delete($(...).fileupload('option', 'formData').key)

Making such changes when using signed-uploads requires regenerating the signature as well (via Ajax or similar methods).

Have more questions? Submit a request

Comments

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

                                element.fileupload({

                                    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

    $('.cloudinary-fileupload').fileupload(

    {

    formData: data,

    url: 'https://api.cloudinary.com/v1_1/inhouse/upload',

    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 ( https://github.com/cloudinary/cloudinary_js/blob/master/js/jquery.cloudinary.js#L364)

  • 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="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></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>

    </head>

    <body>

    <script>$.cloudinary.config({cloud_name:'CLOUDNAME',api_key:"APIKEY"});</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'

    };

    $('#cloudinary-upload').cloudinary_fileupload(opts);

    </script>

    </body>

    </html>

  • 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="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

    </script><script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js">

    </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></head><body><script>

    $.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'

    };

    $('#cloudinary-upload').fileupload({

    formData: opts,

    url: "https://api.cloudinary.com/v1_1/de3aiolw6/upload"

    });

    </script></body></html>

  • 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

    Hello,
    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: https://gist.github.com/12cbe0d5f0087a50d66c3dd265ec629f

    The following doesn't seem to work.

    <code>let newContext = 'email=new@test.com|credits=Me New Context';

    $('.cloudinary-fileupload')
    .cloudinary_fileupload({
    dropZone: '#direct_upload',
    context: newContext,...</code>

    Edited by Bruce Norton
  • 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.

    Edited by Nadav Ofir
Powered by Zendesk