JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://res.cloudinary.com/shirlym/raw/upload/v1675279458/data_exo9uz.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.5.0/papaparse.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>


  
  <input type="text" id="myText"
    value="https://tesla-cdn.thron.com/delivery/public/image/tesla/8236e3bd-0525-4210-b01e-80f847ba1e59/bvlatuR/std/2688x1100/careers-working"
    size="70">

  <p>Click the "Convert" button to get the Cloudinary URL.</p>

  <button onclick="convertToCloudinary()">Convert</button>

  <input type="text" id="myText"
    value="https://tesla-cdn.thron.com/delivery/public/image/tesla/8236e3bd-0525-4210-b01e-80f847ba1e59/bvlatuR/std/2688x1100/careers-working"
    size="70">

  <p>Click the "Convert" button to get the Cloudinary URL.</p>

  <button onclick="convertToCloudinary()">Convert</button>

  <p id="thron"></p>
  <p id="cldurl"></p>
</body>

</html>

JavaScript

function convertToCloudinary() {
  var x = document.getElementById("myText").value;
  const url = new URL(x);
  const myPath = new String(url.pathname);
  var thron = findThron(myPath);
  const csv = "https://res.cloudinary.com/shirly-dam/raw/upload/v1775292138/csvFile.csv";
  var results = [];
  var type = "image"
  const csvData = Papa.parse(csv, {
    header: true,
    download: true,
    complete: response => {
      results = response.data;
      document.getElementById("thron").innerHTML = '<b>Thron: </b>' + thron
      var width = results.filter(data => data.ID === thron)[0].Width;
      var hight = results.filter(data => data.ID === thron)[0].Height;
      var public_id = results.filter(data => data.ID === thron)[0].Public_Id;

      type = getType(myPath);
      let m;
      var newTransformation = "";

      if (type == "thumbnail") { type = "image" }
      else
        newTransformation = getTransformation(type, myPath, width, hight);

      //raw file need to figuer it out
      document.getElementById("cldurl").innerHTML = '<b>Cloudinary URL: </b>' + "https://digitalassets.tesla.com/stage-tesla-com/" + type + "/upload/" + newTransformation + "/" + public_id;

    }
  });
}

function findThron(path) {
  const regex = new RegExp("/tesla/[a-zA-Z0-9\-_]+\/", 'gm')
  m = new String(regex.exec(path))
  m = m.substring(7, m.length - 1)
  return m;
}

function getType(path) {
  const regex = new RegExp("public/[^/]*/tesla", 'gm')
  m = new String(regex.exec(path));
  m = m.substring(7, m.length - 6)
  return m;
}

function getTransformation(type, myPath, width, hight) {
  alert(width)
  if (type == "video") { return "f_auto,q_auto" };
  if (myPath.indexOf("0x0") > -1) { return "f_auto,q_auto" };
  const regex = new RegExp("\\d{2,4}x\\d{2,4}", 'gm')
  m = new String(regex.exec(myPath))

  if (type == "image") {
    if (String(m) != 'null') { //get the dimensions from the url
      return "w_" + m.substring(0, m.indexOf('x')) + ",h_" +...