SPFX with React framework + pnp js

Kritika Kajale

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.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sanjay Makwana5y ago
Import pnp as below code:
import pnp, { Web } from 'sp-pnp-js';

and use pnp.sp.web.getFolderByServerRelativeUrl(.......
0
Zainul5y ago
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?
0
Vipul Jain7y ago
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 <= 10485760) {
// 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!"));
0