Cloudinary Blog
Introducing the Cloudinary Upload Widget v2

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals. Cloudinary is an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation, optimization and dynamic delivery.

As part of our commitment to support the entire flow of media assets, we introduced an intuitive upload widget a few years ago: an out­-of­-the-­box, interactive UI enabling your users to upload media from a variety of sources for immediate use on your website or mobile app.The upload widget is interactive, feature rich, and simple, requiring only a single line of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house upload capabilities.

Today, we are excited to announce the new and improved version of our upload widget, completely redesigned and re-worked, taking advantage of new technologies such as React, ES6, webpack, and rollup.js. The widget has an upgraded design, improved mobile support, and more control over customization and localization.

Webinar
How to Optimize for Page Load Speed

A Widget for Every Need

The Cloudinary upload widget is already being used by thousands of customers, supporting millions’ of uploads, in a variety of verticals:

Social Media social media

Social media apps are all about visual sharing. Social media apps use our widget to enable their users to easily upload their own content, whether it's a new profile picture, photos from their latest holiday, a video of their dancing dog, or any other media they may wish to share with their friends and family. Social media users also love special effects. With Cloudinary, it's simple to add options that enable your users to select from our extensive collection of filters, effects, and other image and video transformation options and apply them to the images they upload.

Marketplace marketplace

Visualization is a vital aid to selling any merchandise, and online stores often have a large team of in-house and external professionals who create the graphics, photos and videos that will sell their products. These companies often take advantage of the upload widget by embedding it into their back-end apps, making it simple for store owners, photographers, and other creative-team members to upload product images and videos directly into the store website.

News and Media news & media

When it comes to news media, speed, simplicity, and mobility are essentials for success. Newspaper websites, user forums, and direct news feeds use Cloudinary's upload widget to simplify the process of uploading media from any device anywhere.

eCommerce and Personalization eCommerce & personalization

The upload widget provides users with a smooth and simple process to upload images that can be printed on T-shirt, canvas, glass, etc., and then preview the end result directly on their chosen product, making it easy and fun for users to buy personalized products.

Advertising advertising

Monetization is a key element for many websites. The upload widget can enable your advertising clients to quickly and effortlessly upload their advertising media to their account for distribution.

A Use Case: Finalsite

Finalsite is the leading digital marketing and communications platform for schools and districts around the world. 2,200 schools around the world, in 80 countries choose Finalsite as their partner.

Finalsite implemented Cloudinary’s solution to enhance media and document management in their CMS' re-designed asset manager. They embedded the Cloudinary upload widget into their CMS, Composer, to allow parents, students and staff to contributes images, videos, and documents to their schools' websites. The Cloudinary upload widget allows Finalsite's users to upload new files, import them from their legacy file system or import from remote sources via a simple and smooth interface.

Alexander Wack, Product Manager at Finalsite, shared a bit about his experience on this project:

social media "Cloudinary allowed us to provide our users with a complete, user-friendly, media upload flow, that was smooth and easy to integrate into our application. Cloudinary's automatic transformation and delivery helps ensure all media is automatically compressed, ensuring optimized delivery without any manual intervention. Thanks to our decision to use the Upload Widget, our Development team can focus on creating the best software for schools while utilizing Cloudinary's expertise to ensure all media aspects are covered."

A Widget for Your Needs

Regardless of your market sector or uploading requirements, these upload widget features will help you achieve your upload goals:

  • Mobile Friendly - responsively resizes to fit in the available width, automatically adjusting on-the-fly for any screen size.
  • Customizable UI - extensive flexibility via the API for customizing fonts, colors, styles and text to fit your application's look and feel.
  • Event Support - comprehensive set of events for triggering custom behavior.
  • Upload from multiple sources - enables your users to upload media assets to your website or application directly from a variety of sources, including local device storage, device camera, Google image search, and from social media accounts such as Dropbox, Instagram or Facebook.
  • Minimizable - with upload progress to enable your users to continue working.
  • Bells and Whistles - supports drag & drop functionality, interactive cropping, upload progress indication, thumbnail previews, and more…

Integrating the upload widget into your application is simple: just include the upload widget script and then call the widget with a single line of code.

Copy to clipboard
<script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>  

<script type="text/javascript">  
  cloudinary.applyUploadWidget('#upload_widget_opener',{ 
    cloudName: 'demo', uploadPreset: 'blog_upload' }, 
    (error, result) => { });    
</script>

That's it --that's all that's needed to implement the default upload widget.

You can try a live example right now by clicking the button below and uploading an image. Just for fun, this widget has been set up to display a cartoonified version of the image you upload as a thumbnail right here in my blog page!

Of-course there are plenty of ways to extend the default functionality and override the default settings. Check out the upload widget docs for that.

A Interactive Demo Page - Tweek, Copy, and Paste

Just to make your life that much easier, we've created a live Upload Widget Demo App that lets you experiment with the various customization options available for the widget. Not only can you use this demo to get a better idea of what the upload widget offers, but the Demo App also automatically generates the code template you need to implement your customized widget on your own site. Just tweek, copy, and paste!

Summing Up

Cloudinary's upload widget is a complete, interactive and fully customizable user interface that addresses the upload needs faced by app developers in nearly every market segment, completely eliminating the need to develop in-house interactive media upload capabilities.

For more information on the upload widget, please see the documentation. If you have any questions, please comment below or test it on your own site by signing up for free.

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter


Further Reading on File Upload

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more