JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Harvey</title>
  </head>
  <body>
  <img src="https://res.cloudinary.com/shirly-dam/image/upload/v1726675953/harvey.svg"/>
  <br>
    <h3>Upload Your PDF</h3>

    <button 
      id="upload_widget" 
      class="cloudinary-button">
        Upload files
    </button>
    
    <p>
      
    </p>
    
    <!-- placeholder for uploaded image -->
    <a href="https://res.cloudinary.com/shirly-dam/image/upload/t_Harvey,fl_attachment/case-briefing.pdf">
    <img  
      id="uploadedimage" 
      src="" width="400">
    </img> 
</a>
    <!-- cloudinary upload widget -->
    <script 
     src="https://widget.cloudinary.com/v2.0/global/all.js" 
     type="text/javascript">
    </script>

    <!-- local upload instantiation -->
    <script 
     src="upload_widget.js" 
     type="text/javascript">
    </script>
 
  </body>
</html>

JavaScript

const cloudName = "shirly-dam"; // replace with your own cloud name
const uploadPreset = "harvey"; // replace with your own upload preset

// Remove the comments from the code below to add
// additional functionality.
// Note that these are only a few examples, to see
// the full list of possible parameters that you
// can add see:
//   https://cloudinary.com/documentation/upload_widget_reference

const myWidget = cloudinary.createUploadWidget(
  {
    cloudName: cloudName,
    uploadPreset: uploadPreset,
    // cropping: true, //add a cropping step
    // showAdvancedOptions: true,  //add advanced options (public_id and tag)
    // sources: [ "local", "url"], // restrict the upload sources to URL and local files
    // multiple: false,  //restrict upload to a single file
    // folder: "user_images", //upload files to the specified folder
    // tags: ["users", "profile"], //add the given tags to the uploaded files
    // context: {alt: "user_uploaded"}, //add the given context data to the uploaded files
    // clientAllowedFormats: ["images"], //restrict uploading to image files only
    // maxImageFileSize: 2000000,  //restrict file size to less than 2MB
    // maxImageWidth: 2000, //Scales the image down to a width of 2000 pixels before uploading
    theme: "white", //change to a purple theme
  },
  (error, result) => {
    if (!error && result && result.event === "success") {
      console.log("Done! Here is the image info: ", result.info);
      document
        .getElementById("uploadedimage")
        .setAttribute("src", result.info.secure_url);
    }
  }
);

document.getElementById("upload_widget").addEventListener(
  "click",
  function () {
    myWidget.open();
  },
  false
);