Uploading image to Imgur using AngularJS

Question

I'm trying to upload a picture using Imgur's API. I would like to keep my code as simple as possible so I'm trying to use the angular-file-upload directive.

I've set up the directive to use an tag and to submit the request to the API at:

https://api.imgur.com/3/image

The HTML looks like this:

<input type="file" nv-file-select="" uploader="uploader">

And inside the controller I'm doing this:

$scope.uploader = new FileUploader({
    url: 'https://api.imgur.com/3/image',
    headers: {
        Authorization: 'Client-ID XXXXXXXXXXXXXXX',
    },
    autoUpload: true
});

The problem I'm facing is that the Imgur API expects to receive the file in the "image" field in the header as a binary file or base64 data, but the browser seems to send the file in the body of the POST request.

I've been trying to get the directive to send the file in the header instead, but I can't find a way to do it. A way to solve this using the angular-file-upload directive or another simple way of implementing this would be appreciated.

One requirement is that I need to provide feedback of the status of the upload: percentage upload, success, error and reason of the error.

Answer 1

I found a simple answer to this question.

When creating the instance of the FileUploader object for the angular-file-upload directive, the alias option has to be specified to change the name of the form field where the file data is included from the default file to the name that Imgur is expecting: image.

$scope.uploader = new FileUploader({
    url: 'https://api.imgur.com/3/image',
    alias: 'image',
    headers: {
        Authorization: 'Client-ID XXXXXXXXXXXXXXX',
    },
    autoUpload: true
});