cld-frontend-uw/index.html at main · cloudinary-training/cld-frontend-uw · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Upload Widget example</title>
  <style>
    #preview-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    #preview-container :is(video, img) {
      width: 200px;
      height: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <h3>Upload Widget Example</h3>

  <button id="upload_widget" class="cloudinary-button">
    Upload files
  </button>

  <p>
    <a href="https://cloudinary.com/documentation/upload_widget" target="_blank">Upload Widget User Guide</a>
  </p>
  <p>
    <a href="https://cloudinary.com/documentation/upload_widget_reference" target="_blank">Upload Widget Reference</a>
  </p>

  <div id="preview-container"></div>

  <script src="https://widget.cloudinary.com/v2.0/global/all.js" type="text/javascript">
  </script>

  <script type="text/javascript">
    const cloudName = "YOUR CLOUD NAME";
    const uploadPreset = "YOUR UPLOAD PRESET";

    const myWidget = cloudinary.createUploadWidget(
      {
        cloudName: cloudName,
        uploadPreset: uploadPreset,
        multiple: true,
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          console.log("Done! Here is the asset info: ", result.info);
          addAssetPreview(result.info);
        }
      }
    );

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

    function addAssetPreview(assetInfo) {
      const previewContainer = document.getElementById("preview-container");
      const previewElement = document.createElement(assetInfo.resource_type === "video" ? "video" : "img");

      previewElement.src = assetInfo.secure_url;

      if (assetInfo.resource_type === "video") {
        previewElement.controls = true;
      }

      previewContainer.appendChild(previewElement);
    }
  </script>

</body>

</html>