SharePoint SPFX: Unable to get property 'Context'

Question

I'm working on a custom SPFX commandset. It opens a dialog with an iframe to an 3rth party platform. I'm able to receive a json through a postmessage. From this json, I convert it's data to a file, with it's proper metadata. All of this works like a charm... Except...

Now I want to upload this file to a document library, and it drives me crazy.
I'm referencing:

import "@pnp/polyfill-ie11";
import { ConsoleListener, Logger, LogLevel } from "@pnp/logging";
import { sp } from "@pnp/sp";
import { Web } from "@pnp/sp/webs";
import "@pnp/sp/webs";
import "@pnp/sp/files";
import "@pnp/sp/folders";
import { Base64 } from 'js-base64';

In my dialog component, I try to upload the file with web.getFolderByServerRelativeUrl. But this method is failing, and I really don't understand why.... Looking at the pnp reference (https://pnp.github.io/pnpjs/sp/files/), It seems like the right way.

var file = Base64.atob(response.Data);
console.log("File length : " + file.length);
let web = Web("https://MyTenant.sharepoint.com/sites/Customer"); // this is successful 

await web.getFolderByServerRelativeUrl("/sites/Customer/Shared%20Documents/")
    .files.add(response.fileName, file, true); // this fails

The context is set on the CommandSet onInit()

@override
  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, 'Initialized myCommandSet');
    pnpSetup({
      spfxContext: this.context
    });
    return Promise.resolve();
  }

Hope you guys and girls can point me in the right direction...

EDIT:

Error:

HTTP400: INVALID REQUEST - The request could not be processed by the server
 due to an invalid syntax
POST - https://MyDevTenant.sharepoint.com/sites/customer/
_api/web/getFolderByServerRelativeUrl
('%2Fsites%2Customer%2FShared%2520Documents%2F')
/files/add(overwrite=true,url='')

Is it the url from the documentlibrary that messes things up?

Yes it has... It also has a length of 62824. I posted the wrong error... I fix that — Bryan van Rijn, Feb 26 '20 at 10:55
That error message is still showing that the `url` parameter of the `add` method is empty. This parameter is what tells SharePoint what to name your uploaded binary, and why I asked about your `response.fileName` value. — willman, Feb 26 '20 at 11:34
To validate where the problem is, you can split up those lines `let destFolder = await web.getFolderByServerRelativeUrl("/sites/Customer/Shared%20Documents/");` `console.log(destFolder); console.log(response.fileName);` `await destFolder.files.add(response.fileName, file, true);` this is obviously less efficient since it makes two separate REST calls, but can help debug. — willman, Feb 26 '20 at 11:38

score 0 · Accepted Answer · answered Feb 26 '20 at 14:42

Thanks to Willman for giving me a right direction. This did the trick:

import { sp, Web, IWeb } from "@pnp/sp/presets/all";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/files";
import "@pnp/sp/folders";

const web = await sp.web();
const list = sp.web.getList("Documents");
const listId = await list.select("Id")();
await sp.web.lists.getById(listId.Id).rootFolder.files.add(docname, file, true);

SharePoint SPFX: Unable to get property 'Context'

1 Answers1