Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Post to imgur using oauth (api v3) on a static (no server) site
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>imgur oauth</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
var extractToken = function(hash) {
var match = hash.match(/access_token=(\w+)/);
return !!match && match[1];
};
var $post = $('.post');
var $msg = $('.hidden');
var $img = $('img');
$post.click(function() {
localStorage.doUpload = true;
localStorage.imageBase64 = $img.attr('src').replace(/.*,/, '');
});
var token = extractToken(document.location.hash);
if (token && JSON.parse(localStorage.doUpload)) {
localStorage.doUpload = false;
$post.hide();
$msg.show();
$.ajax({
url: 'https://api.imgur.com/3/image',
method: 'POST',
headers: {
Authorization: 'Bearer ' + token,
Accept: 'application/json'
},
data: {
image: localStorage.imageBase64,
type: 'base64'
},
success: function(result) {
var id = result.data.id;
window.location = 'https://imgur.com/gallery/' + id;
}
});
}
});
</script>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
<div>
<a class="post" href="https://api.imgur.com/oauth2/authorize?response_type=token&client_id=1e9d0bad8e66dcb">
Post image to imgur
</a>
</div>
<div class="hidden">
<p>Posting to imgur...</p>
</div>
</body>
</html>
<title>imgur oauth</title> <script src="http://code.jquery.com/jquery.min.js"></script> <script> $(function () { var extractToken = function(hash) { var match = hash.match(/access_token=(\w+)/); return !!match && match[1]; };
    var $post = $('.post');
    var $msg = $('.hidden');
    var $img = $('img');

    $post.click(function() {
      localStorage.doUpload = true;
      localStorage.imageBase64 = $img.attr('src').replace(/.*,/, '');
    });

    var token = extractToken(document.location.hash);
    if (token && JSON.parse(localStorage.doUpload)) {
      localStorage.doUpload = false;
      $post.hide();
      $msg.show();

      $.ajax({
        url: 'https://api.imgur.com/3/image',
        method: 'POST',
        headers: {
          Authorization: 'Bearer ' + token,
          Accept: 'application/json'
        },
        data: {
          image: localStorage.imageBase64,
          type: 'base64'
        },
        success: function(result) {
          var id = result.data.id;
          window.location = 'https://imgur.com/gallery/' + id;
        }
      });
    }
  });
</script>
<style>
  .hidden {
    display: none;
  }
</style>

Red dot

<div class="hidden">
  <p>Posting to imgur...</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment