JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cloudinary Media Library</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://media-library.cloudinary.com/global/all.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sjcl/1.0.8/sjcl.min.js"></script>
  </head>
  <body>
    <div
      class="media-library"
      style="position:fixed;top:0;left:0;width:100%;height:100%;"
    ></div>
    <script>
      /**
       * Generate a SHA-256 Hashed Signature
       */
      const generateSignature = string => {
        const bitArray = sjcl.hash.sha256.hash(string);
        const hash = sjcl.codec.hex.fromBits(bitArray);
        return hash.toUpperCase();
      };

      /**
       * Config Parameters
       */
      const configCloudName = "cloud-four-test";
      const configApiKey = "575961334571261";
      const configApiSecret = "nhzoVuN_p2rAw1ro2JIH6_vgf1Q";
      const configUsername = "[email protected]";
      const configTimestamp = Date.now().toString();
      const configSignature =
        "cloud_name=" +
        configCloudName +
        "&timestamp=" +
        configTimestamp +
        "&username=" +
        configUsername +
        configApiSecret;
      const configSignatureHash = generateSignature(configSignature);

      /**
       * Initialize Cloudinary Media Library Widget
       */
      window.ml = cloudinary.openMediaLibrary(
        // config options
        {
          cloud_name: configCloudName,
          api_key: configApiKey,
          username: configUsername,
          timestamp: configTimestamp,
          signature: configSignatureHash,
          inline_container: ".media-library",
          multiple: false,
          default_transformations: [
            // thumbnail
            [
              {
                width: 100,
                height: 100,
                crop: "limit",
                quality: "auto",
            ...