SPFX REACT WebPart file upload works in Workbench but not if it is deployed to SPO

Question

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

sp.web.getFolderByServerRelativeUrl(
        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

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
    .getList(this.siteRelativeUrl+`/InformationBlockDocument`).items
    .select('Id',
        'ItemLabel',
        'ItemNameProperty',
        'Modified',
        'Editor/Id',
        'Editor/Title',
        'Author/Id',
        'Author/Title',
        'File/Name',
        'File/ServerRelativeUrl'
       )
    .expand('Author', 'Editor', 'File')
    .get();

  }

To call the service from controller

await this.service
    .fileUploadInDocumentLibrary(file)
    .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
    service.fileUploadInDocumentLibrary(event.target.files[0]).then(res=>{
    // success
    });  

  }