0

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

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

  }
  • Thanks for your answer, but i get the file over input type file not from a library. – Wilfried Nov 21 '19 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 Nov 21 '19 at 13:15
  • Please check the updated post. I think it will help you. – Palash Kanti Bachar Nov 21 '19 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 Nov 21 '19 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 Nov 21 '19 at 22:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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