(please note, the client id was replaced with gibberish, but I have registered my app and have a real one.)
**HTML code**
<form>
<input id="profPic" type="file" name="pic" accept="image/*">
<button class="btn" ng-click="imgurTime()" type="submit">
Imgur Upload
</button>
</form>
**JavaScript code**
$scope.imgurTime = function(i){
console.log("The value: " + document.getElementById('profPic').value);
$http({
method: 'POST',
url: 'https://api.imgur.com/3/upload',
headers: {
'Authorization': 'Client-ID 1234lkj123lkj324'
},
data: document.getElementById('profPic').value
}).success(function(){
console.log("successfully posted!");
})
}
I requested the Imgur API to do something before authorizing myself. They tell you to do this RIGHT in the documentation, https://api.imgur.com/oauth2, so there's really no excuse to sidestep this.
Thus, all I needed to do to authorize is, first, do an
$http.get('https://api.imgur.com/oauth2/authorize?client_id=<client_id>&response_type=<response_type>').then(function(data){ console.log(awesomeImgurData); });
and it's good to go. Accessing the Imgur API with a MEAN application has never been more simple.