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

Follow

Comments

15 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=[email protected]|credits=Me New Context';

    $('.cloudinary-fileupload')
    .cloudinary_fileupload({
    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.

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

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