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

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more