npm-security/index.html at main · git-compendium/npm-security · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple picture db</title>
  <style>
    button {
      margin: 2em;
    }
  </style>
</head>

<body>
  <h1>Simple picture db</h1>
  <input type="file" name="file" onchange="uploadPic()">
  <ul id="pics"></ul>
  <script>
    function uploadPic() {
      let formData = new FormData();
      const pic = document.querySelector('input[type="file"]').files[0];
      if (pic === undefined) {
        return;
      }
      formData.append('file', pic);
      fetch('/api/picture', {
          method: 'POST',
          body: formData
        })
        .then(data => {
          fetchPics();
        });
    }

    function fetchPics() {
      fetch('/api/pictures')
        .then(data => data.json())
        .then(pics => {
          const ul = document.querySelector('#pics');
          while (ul.firstChild) {
            ul.removeChild(ul.firstChild);
          }
          for (let pic of pics.data) {
            let li = document.createElement("li");
            let img = document.createElement("img");
            let span = document.createElement("span");
            img.src = `data:${pic.mime};base64,${btoa(String.fromCharCode.apply(null,pic.thumbnail.data))}`;
            let deleteButton = document.createElement("button");
            deleteButton.onclick = function () {
              fetch(`/api/picture/${pic.id}`, {
                  method: 'DELETE'
                })
                .then(data => fetchPics());
            };
            deleteButton.innerHTML = 'Delete';
            let picDate = new Date(pic.date * 1000);
            span.innerHTML = picDate.toDateString();
            li.appendChild(img);
            li.appendChild(deleteButton);
            li.append(span);
            ul.appendChild(li);
          }
        });
    }
    fetchPics();
  </script>
</body>

</html>