REST API Image Upload - File Type Missing/Corrupted?

Question

I am attempting to upload images to SharePoint via the REST API and the following Angular snippet: https://github.com/nervgh/angular-file-upload

I will post (returns a 200), but not the full file it appears. It seems like the file type is missing or the file is corrupted. Here is my sample code. Any clues?

appControllers.controller('appUploadImageCtrl', ['$scope', '$location', 'FileUploader', function ($scope, $location, FileUploader) {
    var uploader = $scope.uploader = new FileUploader({
        url: "/sites/_api/web/lists/getByTitle('Documents')/RootFolder/Files/add(url='test.docx',overwrite='true')",
        headers: { 'Accept': 'application/json;odata=verbose', 'content-type': 'application/json;odata=verbose', 'X-RequestDigest': $("#__REQUESTDIGEST").val(), 'IF-MATCH': '*' }
    });

    // FILTERS

    uploader.filters.push({
        name: 'imageFilter',
        fn: function (item /*{File|FileLikeObject}*/, options) {
            var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
            return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
        }
    });

    // CALLBACKS

    uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
        console.info('onWhenAddingFileFailed', item, filter, options);
    };
    uploader.onAfterAddingFile = function (fileItem) {
        console.info('onAfterAddingFile', fileItem);
    };
    uploader.onAfterAddingAll = function (addedFileItems) {
        console.info('onAfterAddingAll', addedFileItems);
    };
    uploader.onBeforeUploadItem = function (item) {
        console.info('onBeforeUploadItem', item);
    };
    uploader.onProgressItem = function (fileItem, progress) {
        console.info('onProgressItem', fileItem, progress);
    };
    uploader.onProgressAll = function (progress) {
        console.info('onProgressAll', progress);
    };
    uploader.onSuccessItem = function (fileItem, response, status, headers) {
        console.info('onSuccessItem', fileItem, response, status, headers);
    };
    uploader.onErrorItem = function (fileItem, response, status, headers) {
        console.info('onErrorItem', fileItem, response, status, headers);
    };
    uploader.onCancelItem = function (fileItem, response, status, headers) {
        console.info('onCancelItem', fileItem, response, status, headers);
    };
    uploader.onCompleteItem = function (fileItem, response, status, headers) {
        console.info('onCompleteItem', fileItem, response, status, headers);
    };
    uploader.onCompleteAll = function () {
        console.info('onCompleteAll');
    };

    console.info('uploader', uploader);

        $scope.cancel = function () {
            $location.path('/');
        }
}]);

Update: Adding processData: false, is now allowing the file type but the contents still seem corrupted. I believe I need to add something related to the arrayBuffer but am unsure of the implementation given the Angular snippet I am using.

Answer 1

In your headers make sure you got the correct $("#__REQUESTDIGEST").val().

If you are executing the request from a dialog box, I am absolutely sure you got the wrong $("#__REQUESTDIGEST").val() (probably 'undefined').

Try to pass it as an argument from the aspx original page.