Imgur API http post image with angular JS

Question

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.

I would suggest you to: 1. put some console log instead of scope vars, so you have an immediate return of the values. 2. if you are using karma (and I hope so) write an unit test to see if the rest service is called. 3. show me all the code, I would like to see how you are binding the controller. Please, do the third first — Gianmarco
– Gianmarco, Commented Dec 13, 2015 at 0:07
edit your question with your code so everyone can evaluate the situation (remember always to enrich your questions the more you can) — Gianmarco
– Gianmarco, Commented Dec 13, 2015 at 0:14

Gianmarco · Accepted Answer · 2015-12-13 00:49:03Z

1

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

answered Dec 13, 2015 at 0:49

Gianmarco

2,55027 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alec Hewitt Over a year ago

okay I got the error: Object {data: Object, status: 400, config: Object, statusText: "Bad Request"}

Gianmarco Over a year ago

ok, now you have to try what is the correct request that you should send, maybe you have some params wrong, I cannot test this in my system, I got a 404

Alec Hewitt Over a year ago

Hey this issue was resolved actually, thanks for the help. I'll post 'fix' edit.

Alec Hewitt · Accepted Answer · 2015-12-13 16:01:12Z

1

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

answered Dec 13, 2015 at 16:01

Alec Hewitt

436 bronze badges

Collectives™ on Stack Overflow

Imgur API http post image with angular JS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related