如何使用带有AngularJS的REST API将blob文件附件上传到SharePoint中的列表项？

Question

I am trying to upload a file from a HTML form as an attachment of a list item in a SharePoint 2013 list.

Now, I can upload every file, but only .txt files aren't corrupted, so only .txt files can be opened then.

When user submit my form, I have an object with following properties:

Then in code, I have this to read this blob data:

    var fileData = null;

    // Get a content from url with blob: .......
    $http.get(fileInfo.url, {
        headers: {
            "Accept": "application/xml;odata=verbose",
            "X-Requested-With": "XMLHttpRequest",
        }
    }).then(function (data) {
        fileData = data.data;

        // Upload a file
        $http.post(siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles/add(FileName='" + fileInfo.name + "')", fileData, {
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-Requested-With": "XMLHttpRequest",
                "X-RequestDigest": document.getElementById('__REQUESTDIGEST').value
            }
        }).then(function (data) {
            console.log("OK");
            successFunction(data);
        }, function (data) {
            console.log("NOT OK");
            errorFunction(data);
        });
    }, function (data) {
        alert("Error");
    });

And probably this is the place where is the problem. When user upload a .txt file, fileData variable is string with exactly the same as in that .txt file. But if user upload .docx file (MS Word), string in fileData variable is something like this (only the beginning):

PK!ߤ lZ ?[Content_Types].xml ( n 0?E ? Ub袪* > -R {V Ǽ ?QU ↵l"%3 3Vƃ ښl w% = ^i7+ -d& 0 A 6 l4 L60# Ò S↵O X * V$z 3 3 %p)O ?^ ?

So maybe encoding? Bad specification of data type? I don't know.

I will be extremely grateful for the help. Thanks a lot in advice.

Answer 1

To get it working you need to specify responseType: "arraybuffer" for both GET and POST requests like this:

$http.get(fileInfo.url, {
    responseType: "arraybuffer",
    headers: {
        "Accept": "application/xml;odata=verbose",
        "X-Requested-With": "XMLHttpRequest",
    }
})

and then for POST request set Content-Type to undefined and overwrite the transformRequest property so Angular doesn't encode your array into Json

$http.post(siteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items(" + itemId + ")/AttachmentFiles/add(FileName='" + fileInfo.name + "')", fileData, {
        headers: {
            "Accept": "application/json;odata=verbose",
            "Content-Type": undefined,
            "X-Requested-With": "XMLHttpRequest",
            "X-RequestDigest": document.getElementById('__REQUESTDIGEST').value
        },
        transformRequest: angular.identity,
        responseType: 'arraybuffer'
})