Skip to main content

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

Comments

15 comments

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

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

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

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

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

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

    }

    });

     

    0
  • Tal Lev-Ami

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

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

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

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

                                });

    0
  • Andrés Javier López

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

    0
  • 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)

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

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

    0
  • TJ Eastmond

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

    0

Please sign in to leave a comment.