将“上传到Imgur”按钮添加到前端图库缩略图

Question

我在Wordpress中有多个图库和相册，每天都会更新新图像。在前端我想在每个缩略图下面都有一个按钮或链接，它会将完整大小的图像发送到Imgur，这样用户就可以使用Imgurs图像编辑选项和什么不是。

我有一个工作代码，用于将图像从硬盘拖放到Imgur，如下所示。

我应该如何修改此代码，使其按照描述进行，以及如何编辑WP文件以及编辑哪些WP文件？

我不介意使用其他插件来完成此任务。

    window.ondragover = function(e) {
      e.preventDefault()
    }
    window.ondrop = function(e) {
      e.preventDefault();
      upload(e.dataTransfer.files[0]);
    }

    function upload(file) {


      if (!file || !file.type.match(/image.*/)) return;
      document.body.className = "uploading";


      var fd = new FormData();
      fd.append("image", file);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "https://api.imgur.com/3/image.json");
      xhr.onload = function() {
        document.querySelector("#link").href = JSON.parse(xhr.responseText).data.link;
        document.body.className = "uploaded";
      }


      xhr.setRequestHeader('Authorization', 'Client-ID ');


      xhr.send(fd);
    } < /script>

    body {
      text-align: center;
      padding-top: 100px;
    }
    div {
      border: 10px solid black;
      text-align: center;
      line-height: 100px;
      width: 200px;
      margin: auto;
      font-size: 40px;
      display: inline-block;
    }
    #link,
    p,
    div {
      display: none
    }
    div {
      display: inline-block;
    }
    .uploading div {
      display: none
    }
    .uploaded div {
      display: none
    }
    .uploading p {
      display: inline
    }
    .uploaded #link {
      display: inline
    }
    em {
      position: absolute;
      bottom: 0;
      right: 0
    }

<div>DROP!
  <button onclick="document.querySelector('input').click()">Or click</button>
</div>
<input style="visibility: collapse; width: 0px;" type="file" onchange="upload(this.files[0])">

<p>Uploading...</p>
<a id="link">It's online!!!</a>