CODEWITHSUNDEEP
javascriptangularjsimgur
Alec Hewitt
Alec Hewitt

Reputation: 43

Imgur API http post image with angular JS

my angular js code is failing to upload an image with the imgur API. angular js http post method angular js http post method

HTML:

<!doctype html>
<html ng-app="stalkcalibrator">
<head>
  <title>Corn Stalk Calibrator</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style/style.css"/>
  <script src="angular.js"></script>
  <script src="controllers.js"></script>
</head>

<body ng-controller="adminController">

  <h1 id="title">Calibrator - Admin Upload</h1>
  <!-- back to admin home -->
  <div id="back"><a href="admin.html">Admin Home</a></div>

  <!-- form used to upload one or more images -->
  <form>
    <!-- button allows user to browse local directory for image -->
    <!-- ng-model saves image var in array -->
    Upload image <input type="file" ng-model="img" accept="image/*" id="file" />

    <!-- executes js upload function with uploaded images -->
    <button><a ng-click="upload()">Submit</a></button>

    <p ng-model="num">{{num}}</p>

  </form>

</body>

</html>

Here's my JS:

var stalkcalibrator = angular.module('stalkcalibrator', []);

stalkcalibrator.controller('adminController', function($scope){

  //array of data for each stalk. PULL FROM JSON FILE!
  $scope.stalks = [{id:1, name:2, thumbnail:3, note:4}, {id:9, name:10, thumbnail:11, note:12}, {id:5, name:6, thumbnail:7, note:8}];

  //array of image uploads
  $scope.img;

$scope.num = 1;

  function getStalks($scope){

  }

  $scope.upload = function() {
    $http({
        headers: {'Authorization': 'Client-ID 010fe699c18e3c9'},
        url: 'https://api.imgur.com/3/',
        type: 'POST',
        data: {'image': $scope.img}
    }).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
    $scope.num = 2;
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
    $scope.num = 3;
  });


    //adds image data to JSON file
    //_TODO_

  };

});

Thanks!

EDIT: neither errorCallback nor successCallback is being called back.

Upvotes: 1

Views: 1213

Answers (2)

Alec Hewitt
Alec Hewitt

Reputation: 43

Resolved. It turns out that self.img was the wrong file type for the Imgur API. Had to convert to base64 and make edits suggested by @Gianmarco

Upvotes: 1

Gianmarco
Gianmarco

Reputation: 2552

I would change your code like this:

angular.module('stalkcalibrator', []) //best practise is not to declare a variable to contain this

.controller('adminController',['$scope','$log','$http', function($scope,$log,$http){ // safe dependency injection

    var self = this; //self will contain the data from the controller. I dislike to put all into the scope.
    //array of data for each stalk. PULL FROM JSON FILE!
    self.stalks = [{id:1, name:2, thumbnail:3, note:4}, {id:9, name:10, thumbnail:11, note:12}, {id:5, name:6, thumbnail:7, note:8}];

    //array of image uploads
    self.img;
    self.num = 1;

    self.getStalks = function($scope){};

    self.upload = function() {
        $http({
            headers: {'Authorization': 'Client-ID 010fe699c18e3c9'},
            url: 'https://api.imgur.com/3/',
            type: 'POST',
            data: {'image': self.img}
        }).then(function successCallback(response) {
            self.num = 2;
            $log.log('called and successful', response);
        }, function errorCallback(err) {
            self.num = 3;
            $log.log('called but error', err);
        });

    };
}]);

Then the html:

<body ng-controller="adminController as ac">

  <h1 id="title">Calibrator - Admin Upload</h1>
  <!-- back to admin home -->
  <div id="back"><a href="admin.html">Admin Home</a></div>

  <!-- form used to upload one or more images -->
  <form>
    Upload image <input type="file" ng-model="ac.img" accept="image/*" id="file" />

    <!-- executes js upload function with uploaded images -->
    <button ng-click="ac.upload()">Submit</button>

    <p ng-bind="ac.num"></p>
  </form>
</body>

Try this, I think the problem might have been in

<button><a ng-click="upload()">Submit</a></button>

You were clicking on the button and not on the text (that was the actual anchor that was able to call the upload function).

With this we should at least be able to see something in console

Upvotes: 1

Related Questions