Direct image upload using Cloudinary API using jQuery

Question

I am trying to upload images using Cloudinary image upload API using jQuery. I have no idea about it. I am using the following code. and I dont know what value do we use in signature parameter.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Insert title here</title>
        <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
        <script src="js/jquery.ui.widget.js"></script>
        <script src="js/jquery.iframe-transport.js"></script>
        <script src="js/jquery.fileupload.js"></script>
        <script src="js/jquery.cloudinary.js"></script> 
    </head>
    <body>
        <script type="text/javascript">
            $.cloudinary.config({"api_key":"api_key","cloud_name":"cloud_name"});
        </script> 
        <input name="file" type="file" id="uploadinput"
            class="cloudinary-fileupload" data-cloudinary-field="image_upload" 
            data-form-data="" ></input>
        <script>
            var data = { "timestamp":  '', 
              "callback": "http//localhost/cloudinar/index.php?message='file     has been uploaded'",
              "signature": "", 
              "api_key": "api_key" };    
              $('#uploadinput').attr('data-form-data', JSON.stringify(data));
        </script>
    </body>
</html>

vsync · Accepted Answer · 2016-07-28 09:30:32Z

After talking with support I was directed to this post, which shows how to upload files directly to Cloudinary, as simple as possible, with "unsigned" method:

$('.upload_field').unsigned_cloudinary_upload("zcudy0uz", 
    { cloud_name:'demo', tags:'browser_uploads' }, 
    { multiple:true }
)
.on('cloudinarydone', function(e, data){
    var opts = { 
        format  : 'jpg',
        width   : 150,
        height  : 100,
        crop    : 'thumb',
        gravity : 'face',
        effect  : 'saturation:50'
    };

    $('.thumbnails').append( $.cloudinary.image(data.result.public_id, opts) )
})
.on('cloudinaryprogress', function(e, data){ 
    var W = Math.round((data.loaded * 100.0) / data.total) // %
    $('.progress_bar').css('width', W + '%'); 
});

I was also given a demo page by a person named "Maor Gariv" who answered my support email.

Itay Taragano · Accepted Answer · 2016-05-14 00:21:23Z

1

Cloudinary's server-side SDKs support automatically generating an input field which automatically includes the corresponding signature. For more information (e.g., with PHP): http://cloudinary.com/documentation/php_image_upload#direct_uploading_from_the_browser

answered May 14, 2016 at 0:21

Itay Taragano

1,9311 gold badge11 silver badges13 bronze badges

2 Comments

vsync Over a year ago

I want to know exactly what the title says "Direct image upload..." and this answer does not help in any way.. the documentation on Cloundinary is awful. Why would I want/need to generate an input field if I already have one? why can't the code just be connected to the already existing element and just send the the data to the server with 3-5 lines of code? including 5 js scripts for such simple thing seems insane.

Itay Taragano Over a year ago

The server-side code can simplify this with a single line of code. However, you can indeed also have Cloudinary working with your already added input field. Note that the dynamically javascript adding of the data-form-data wouldn't work as in the example you shared. It can be done in a different way. See - support.cloudinary.com/hc/en-us/articles/…

Collectives™ on Stack Overflow

Direct image upload using Cloudinary API using jQuery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related