{"id":22111,"date":"2020-07-02T16:32:19","date_gmt":"2020-07-02T16:32:19","guid":{"rendered":"http:\/\/javascript_file_upload_to_cloudinary"},"modified":"2024-06-04T15:54:44","modified_gmt":"2024-06-04T22:54:44","slug":"javascript_file_upload_to_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/javascript_file_upload_to_cloudinary","title":{"rendered":"JavaScript File Upload in Two Simple Steps"},"content":{"rendered":"

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.<\/p>\n

This article shows you how to enable users to efficiently JavaScript file upload<\/a> to Cloudinary.<\/p>\n

Setup Process<\/h2>\n

The setup process involves two simple steps: create an HTML form, add JavaScript code to it, and then integrate with Cloudinary\u2019s 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.<\/p>\n

Creation of HTML Form<\/h3>\n

Create a file called form.html<\/code> with the following content:<\/p>\n

\n<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n    <title<\/span>><\/span>JavaScript File Upload<\/title<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n      <button<\/span> id<\/span>=\"upload_widget\"<\/span>><\/span>Upload files<\/button<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Add JavaScript<\/h3>\n
Next, add the following JavaScript code to form.html<\/code>:<\/p>\n
\n<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span>><\/span>\n    <title<\/span>><\/span>JavaScript File Upload<\/title<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n      <button<\/span> id<\/span>=\"upload_widget\"<\/span> class<\/span>=\"cloudinary-button\"<\/span>><\/span>Upload files<\/button<\/span>><\/span>\n\n     <script<\/span> src<\/span>=\"https:\/\/widget.cloudinary.com\/v2.0\/global\/all.js\"<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span><\/script<\/span>><\/span>\n     <script<\/span> type<\/span>=\"text\/javascript\"<\/span>><\/span>  \n  var<\/span> widget = cloudinary.applyUploadWidget({ \n    cloudName<\/span>: 'demo'<\/span>, \n    uploadPreset<\/span>: 'blog_upload'<\/span> }, \n    (error, result) => { \n       if<\/span> (!error && result && result.event === \"success\"<\/span>) { \n      \t\tconsole<\/span>.log('Done uploading..: '<\/span>, result.info); \n   \t      }\n\n     });    \n\n   document<\/span>.getElementById(\"upload_widget\"<\/span>).addEventListener(\"click\"<\/span>, function<\/span>(<\/span>)<\/span>{\n    myWidget.open();\n  }, false<\/span>);\n     <\/span><\/script<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Traditionally, you would create a form with the <form><\/code> element for JavaScript file uploads. By taking advantage of Cloudinary\u2019s upload widget, you can eliminate that step.<\/p>\n
Integration With Cloudinary\u2019s Upload Widget<\/h3>\n
Cloudinary\u2019s 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.<\/p>\n
With Cloudinary\u2019s 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.<\/p>\n
To integrate with the upload widget, do the following:<\/p>\n
    \n
  1. \n
    Sign up<\/a> for a free Cloudinary account and log in to the dashboard, an example of which looks like this:<\/p>\n
    \"media<\/p>\n
    Displayed are your cloud name<\/strong>, API key<\/strong>, and API secret<\/strong>, which are key credentials for interacting with Cloudinary\u2019s capabilities.<\/p>\n
    \"presets\"<\/p>\n<\/li>\n
  2. \n
    Create an upload preset<\/a> with which to centrally define your image-upload options instead of specifying them for each of the uploads.<\/p>\n<\/li>\n<\/ol>\n
    Note:<\/strong> Be sure to replace the cloudName<\/code> and uploadPreset<\/code> values with yours from the Cloudinary dashboard.<\/p>\n
    You\u2019re now all set. Clicking the Upload files<\/strong> button causes this form widget to pop up:<\/p>\n
    \"upload<\/p>\n
    Advantages<\/h2>\n
    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.<\/p>\n
    \"Upload<\/p>\n
    Check out your console after a user upload of, say, an image. You\u2019ll see a returned response that contains all the details of the upload that just occurred, including the image\u2019s URL. The user can store that URL somewhere or assign it to the src<\/code> attribute of an image<\/code> tag for display. Talk about convenience and seamlessness exemplified!<\/p>\n
    More Options to Leverage<\/h2>\n
    Cloudinary\u2019s 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<\/a>.<\/p>\n
    Want to Learn More About File Uploads?<\/h2>\n