Upload widget - Pure JavaScript VS jQuery

Cloudinary's Upload widget is a complete, interactive user interface that enables your users to upload files from a variety of sources to your website or application. The widget, which requires just a couple of lines of code to integrate, eliminates the need to develop in-house interactive media 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="https://upload-widget.cloudinary.com/latest/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: '<PRESET_NAME>'}, 
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/skalahasti/d4gq7ueh/4/
Here are some features that are available only when using jQuery:

1. Show thumbnails of uploaded images automatically.
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