How to upload a blob file attachment to list item in SharePoint using REST API with AngularJS?

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�0E��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.

mimetype of .docx files is application/vnd.openxmlformats-officedocument.wordprocessingml.document — briosheje
– briosheje, Commented Jan 2, 2017 at 15:05
To GET binary files, use responseType: "blob" or responseType: "arraybuffer. For more information, see MDN Web API Reference -- responseType. — georgeawg
– georgeawg, Commented Jan 2, 2017 at 17:10

Vadim Gremyachev · Accepted Answer · 2017-01-04 15:02:53Z

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'
})

Collectives™ on Stack Overflow

How to upload a blob file attachment to list item in SharePoint using REST API with AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related