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:
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="//upload-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/skalahasti/d4gq7ueh/4/
Here are some features that are available only when using jQuery:
- Show thumbnails of uploaded images automatically.
- 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
Comments
0 comments
Please sign in to leave a comment.