Cloudinary Blog

JavaScript File Upload in Two Simple Steps

JavaScript File Upload in Two Simple Steps

Uploading software files to the web, mobile, or desktop is as old as the web itself. Billions of files are moved around and downloaded on the Internet daily. Coincidentally, as the de facto language in which many apps are written, JavaScript is also as old as the web.

This article shows you how to enable users to efficiently JavaScript file upload to Cloudinary.

Setup Process

The setup process involves two simple steps: create an HTML form, add JavaScript code to it, and then integrate with Cloudinary’s upload widget. Afterwards, all your users need to do is click the form for a dialog box in which to choose the file for upload.

Creation of HTML Form

Create a file called form.html with the following content:

Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript File Upload</title>
</head>
<body>
      <button id="upload_widget">Upload files</button>
</body>
</html>

Add JavaScript

Next, add the following JavaScript code to form.html:

Copy to clipboard
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript File Upload</title>
</head>
<body>
      <button id="upload_widget" class="cloudinary-button">Upload files</button>

     <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript"></script>
     <script type="text/javascript">  
  var widget = cloudinary.applyUploadWidget({ 
    cloudName: 'demo', 
    uploadPreset: 'blog_upload' }, 
    (error, result) => { 
       if (!error && result && result.event === "success") { 
            console.log('Done uploading..: ', result.info); 
          }

     });    

   document.getElementById("upload_widget").addEventListener("click", function(){
    myWidget.open();
  }, false);
     </script>
</body>
</html>

Traditionally, you would create a form with the <form> element for JavaScript file uploads. By taking advantage of Cloudinary’s upload widget, you can eliminate that step.

Integration With Cloudinary’s Upload Widget

Cloudinary’s upload widget is an API for seamlessly uploading files, such as images, to the cloud. Subsequently, Cloudinary safely stores the files in the cloud with secure backups and revision history.

With Cloudinary’s free-tier plan, you can store up to 75,000 images and videos for a total of 2 GB. You also receive 7,500 transformations and 5 GB net viewing bandwidth per month.

To integrate with the upload widget, do the following:

  1. Sign up for a free Cloudinary account and log in to the dashboard, an example of which looks like this:

    media library

    Displayed are your cloud name, API key, and API secret, which are key credentials for interacting with Cloudinary’s capabilities.

    presets

  2. Create an upload preset with which to centrally define your image-upload options instead of specifying them for each of the uploads.

Note: Be sure to replace the cloudName and uploadPreset values with yours from the Cloudinary dashboard.

You’re now all set. Clicking the Upload files button causes this form widget to pop up:

upload widget

Advantages

The beauty of uploading JavaScript files with the Cloudinary upload widget lies in its versatility. Users can upload from their Instagram, Shutterstock, Google Drive, Dropbox, or Facebook account, or any remote URL from their device.

Upload options

Check out your console after a user upload of, say, an image. You’ll see a returned response that contains all the details of the upload that just occurred, including the image’s URL. The user can store that URL somewhere or assign it to the src attribute of an image tag for display. Talk about convenience and seamlessness exemplified!

More Options to Leverage

Cloudinary’s upload widget offers many more configurations and API methods you can call, e.g., to crop an image before upload. For details, see the related documentation.

Want to Learn More About File Uploads?

Recent Blog Posts

Our $2B Valuation

By
Blackstone Growth Invests in Cloudinary

When we started our journey in 2012, we were looking to improve our lives as developers by making it easier for us to handle the arduous tasks of handling images and videos in our code. That initial line of developer code has evolved into a full suite of media experience solutions driven by a mission that gradually revealed itself over the course of the past 10 years: help companies unleash the full potential of their media to create the most engaging visual experiences.

Read more
Direct-to-Consumer E-Commerce Requires Compelling Visual Experiences

When brands like you adopt a direct–to-consumer (DTC) e-commerce approach with no involvement of retailers or marketplaces, you gain direct and timely insight into evolving shopping behaviors. Accordingly, you can accommodate shoppers’ preferences by continually adjusting your product offering and interspersing the shopping journey with moments of excitement and intrigue. Opportunities abound for you to cultivate engaging customer relationships.

Read more
Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

Shoppers return time and again to Minted’s global online community of independent artists and designers because they know they can count on unique, statement-making products of the highest quality there. Concurrently, the visual imagery on Minted.com must do justice to the designs into which the creators have poured their hearts and souls. For Minted’s VP of Engineering David Lien, “Because we are a premium brand, we need to ensure that every single one of our product images matches the selected configuration exactly. For example, if you pick an 18x24 art print on blue canvas, we will show that exact combination on the hero images in the PDF.”

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more