Adding “upload to Imgur” button to front end gallery thumbnails

1 Views

I have multiple galleries and albums in WordPress which are updated with new images every day. In the front end I want to have a button or link under each thumbnail which will send the full sized image to Imgur so users can use Imgurs image editing options and what nots.

I have a working code for drag and drop an image from hard drive to Imgur as shown below.

Read More

How should I modify this code so it will do as described, and how and which WP files should also be edited?

I don’t mind having to use other plugins to accomplish this. 

    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>
Post Views: 1

Related posts