I'm developed a react webpart and try uploading a file to a Libraby. While i test it in the Workbensh it works perfectly. After deploying the webpart to SPO, it fails.

the setup of sp:

sp.setup({ spfxContext: this.props.controller.context });

then i get the file like this:

var files: HTMLInputElement = document.getElementById("fileUpload") as HTMLInputElement;

I've using this code for my first try: This thorw an 404 Error

        this.props.controller.context.pageContext.web.serverRelativeUrl+ "/"+listName)
        .files.add(file.name, file, true)
        .then((data) =>{
          alert("File uploaded sucessfully");
        .catch((error) =>{
          alert("Error is uploading "+error);

After them i tried this:

this.props.controller.GetRootFolderById(Guid.parse(listId)).then(fld => {
             var folderId = fld.UniqueId;
             console.log("FolderId: " + folderId);
             var folder = sp.web.getFolderById(Guid.parse(folderId).toString());

            folder.files.add(file.name, file, true).then(x => {
                console.log("Progress ...");
                UploadDocument.Me.setState({ waitHidden: true });

i get also the Error result:

  body: ReadableStream
  bodyUsed: false 
  ​headers: Headers 
  ​ok: false
  ​redirected: false 
  ​status: 404 ​
  statusText: "Not Found"
  ​type: "basic"

And this happens only if it is deployed, in workbench works both samples!

Can sombody help me to find a solution?

Regards Wilfried

1 Answer 1


I have created a document lib name: InformationBlockDocument

service is given below to upload the file:

public async fileUploadInDocumentLibrary(file: any){
   return this.web.getFolderByServerRelativeUrl(this.siteRelativeUrl+`/InformationBlockDocument/`).files.add(file.name, file.content, true);
    //.then(_ => Logger.write("done"));


To get the file from server service is given below:

public async getFileFromDocumentLibrary(){

   return await this.web
    .expand('Author', 'Editor', 'File')


To call the service from controller

await this.service
    .then((f: any) => {

       -- success

HTML Code in React Render method

 <input type="file" onChange={(e) => this.onFileChangeHandler(e)} />

On change method to upload the file

  public  onFileChangeHandler  (event)  {
    // call the service with file param
    // success

  • Thanks for your answer, but i get the file over input type file not from a library.
    – Wilfried
    Commented Nov 21, 2019 at 13:07
  • Thanks for your answer, but i get the file from input type: file not from a library and when uploading occurs 404 Error on deployed system.
    – Wilfried
    Commented Nov 21, 2019 at 13:15
  • Please check the updated post. I think it will help you. Commented Nov 21, 2019 at 13:26
  • Sorry don't work if it is deployed. but the error has changed: Error: Error making HttpClient request in queryable [400] Bad Request ::> {"odata.error":{"code":"-2147024809, System.ArgumentException","message":{"lang":"de-DE","value":"Server relative urls must start with SPWeb.ServerRelativeUrl"}}} Besides that, the file.content proerty does not exist, i got the file it self. What is by you this.web, i have oly sp.web. Is here s.t. different?
    – Wilfried
    Commented Nov 21, 2019 at 14:34
  • Ok super, thanks for your help! I found out, that it doesn't work if i make an api call between get filecontent and upload.
    – Wilfried
    Commented Nov 21, 2019 at 22:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.