Upload widget - Pure JavaScript VS jQuery

Cloudinary's upload widget is an interactive, feature-rich, simple to integrate method to add Cloudinary support to your website. The widget, requiring just a couple lines of code to integrate, eliminates the need to develop in-house interactive image upload capabilities. 

There are two ways to add the upload widget:

1. Using pure Javascript.

2. Using jQuery

Javascript

After updating your cloud name and upload preset you can just add this code to your HTML:

<a href="#" id="upload_widget_opener">Upload multiple images</a>

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>  

<script type="text/javascript">  
  document.getElementById("upload_widget_opener").addEventListener("click", function() {
    cloudinary.openUploadWidget({ cloud_name: '<CLOUD NAME>', upload_preset: '<UPLOAD PRESET>'}, 
      function(error, result) { console.log(error, result) });
  }, false);
</script>

Here is a Jsfiddle.

jQuery
Here is an example of a basic upload widget using jQuery:
https://jsfiddle.net/shirlymanor/he6phwct/


Here are some features that are available only when using jQuery:

1. Show thumbnails of uploaded images automaticly.
2. Uses jQuery selector to apply to matching elements. For example:

$('#opener2').cloudinary_upload_widget({ upload_preset: '<my-upload-preset>' });

3.Use global events like: cloudinarywidgetsuccess,cloudinarywidgetfileuploadsuccess, cloudinarywidgetclosed, cloudinarywidgeterror and cloudinarywidgetdeleted.

4. Showing the thumbnail of an image before uploading.

5. Applying client-side validations. Our jQuery library supports a client-side validation for uploads, including file types, maximum file size, and more.
For more information:
https://github.com/cloudinary/cloudinary_js#client-side-image-resizing-before-upload

6. Interactive cropping.

7. upload progress indication