SPFX with React framework + pnp js

Question

I am working on a project in spfx with react framework and I am using pnp js for interacting to sharpoint list/libraries. I am getting an error in following piece of code. sp.web.getFolderByServerRelativeUrl("doc_lib_internal_name").files.add(file.name, file, true) .then((f) =>{ console.log(f.file.listItemAllFields); return f.file.listItemAllFields; }) .catch((err)=>{ console.log(err); alert(err); }); Error given : Type-error 'Failed To fetch'. File is getting added to document library but after that control is going to catch block instead of then block. I am not getting where exactly I am doing wrong.

Sanjay Makwana · Answer

Import pnp as below code: import pnp, { Web } from 'sp-pnp-js'; and use pnp.sp.web.getFolderByServerRelativeUrl(.......

Zainul · Answer

I am also facing the exact same issue but it is intermittent. It does not happen everytime. I tried the solution given by Vipul Jain also but it didn't work. Any other suggestions for solving this?

Vipul Jain · Answer

Try the below code in your environment:- // you can adjust the below number to control what size files are uploaded in chunks if (file.size // small upload web.getFolderByServerRelativeUrl("/sites/dev/Shared%20Documents/test/").files.add(file.name, file, true).then(_ => Logger.write("done")); } else { // large upload web.getFolderByServerRelativeUrl("/sites/dev/Shared%20Documents/test/").files.addChunked(file.name, file, data => { Logger.log({ data: data, level: LogLevel.Verbose, message: "progress" }); }, true).then(_ => Logger.write("done!"));