Instantly share code, notes, and snippets.

Embed
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>
@jwebb9421

This comment has been minimized.

jwebb9421 commented Oct 15, 2016

<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>
@mahye82

This comment has been minimized.

mahye82 commented Oct 11, 2018

What is the redirect/callback URL you're using for this app in the Imgur settings?

@alph4delta

This comment has been minimized.

alph4delta commented Oct 29, 2018

one of imgur api developer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment