How to upload any file using MS Graph API?

Question

I am following this and I want to upload any type of file to OneDrive. It says that it accepts a buffer for the file content but my following code does not seem to work in case of any type of file. The file gets uploaded but it cannot be opened so the contents are messed up for sure.

Using the following method I am trying to get the body contents so that I can send them with the request.

private fileToBuffer(file: File): Observable<any> {
    return Observable.create(observer => {
        var arrayBuffer;
        var fileReader = new FileReader();
        fileReader.onload = function () {
            arrayBuffer = this.result;
            observer.next(arrayBuffer);
            observer.complete();
        };
        fileReader.readAsArrayBuffer(file);
    });
}

Hi Ibrahim, try obtaining a network capture of the upload using a tool like Fiddler, and see if the uploaded content matches what you expect. It sounds like you may be uploading the file encoded in some way, and the server may be storing it raw without decoding it in the way that your uploading component expects. — daspek
– daspek, Commented May 5, 2016 at 18:27
@daspek A sample of how to use the upload API of OneDrive would be really helpful. I cannot locate any sample online and the documentation is not sufficient. — lbrahim
– lbrahim, Commented May 6, 2016 at 9:18

lbrahim · Accepted Answer · 2016-05-07 09:59:03Z

2

I did not notice that the Angular 2's http's PUT was taking the body as string. So, I resorted to using XHR to upload a file with its contents.

var oReq = new XMLHttpRequest();
oReq.open("PUT", url, true);
oReq.setRequestHeader("Content-Type", "text/plain");
oReq.onload = function(e){
    console.log('done');
};
oReq.send(arrayBuffer);

answered May 7, 2016 at 9:59

lbrahim

3,83012 gold badges60 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

How to upload any file using MS Graph API?

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