Pnpjs: .files.addChunked(.. error Error making HttpClient request in queryable [404]

[Ofer-Gal]

Category

• [ ] Enhancement
• [X] Bug
• [ ] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [ ^2.0.10 then ^2.0.12 ]
Please specify what version(s) of SharePoint you are targeting: [ Online ]

Expected / Desired Behavior / Question

The code:
uFile = await projectWebSite.getFolderByServerRelativeUrl("/teams/" + dItem.dpcProjectNumber + "/DPCDocuments/").files.addChunked( oneFileData.Name, upFile.getRawFile(), data => { console.log("progress " + data.blockNumber + " Stage " + data.stage); }, true);
Should upload 39.2 MB file to SPO library with no error.

Observed Behavior

When using @pnp/sp": "^2.0.10" The file uploaded fine but an error was thrown "Error making HttpClient request in queryable [404] ::>
{"odata.error":{"code":"-2130575338, Microsoft.SharePoint.SPException",
"message":{"lang":"en-US",
"value":"The file /teams/2393.019/DPCDocuments/Adventist Health Rural Areas Family Medicine Updated_v4.xlsx does not exist."

After Update to @pnp/sp": "^2.0.12", The file uploaded corrupted but the error was the same.

I was looking for documentation how to change the "chunkSize" when calling .addChunked but found no explanation except what it does.

Most surprising was the test I made to add the same file without .addChunked but with normal .files.add
The file was uploaded fine with no error messages and not corrupted. I tried with some other big files and again there was no error with files.add .
I am not sure if it is safe for production.

Steps to Reproduce

Use the above code to upload a big file to SPO

Thank you for your help!

[tavikukko]

Tested with this code in SP Editor and it worked fine. Uploaded 50MB.zip first to library. The script downloads that file, renames it to 50MB2.zip and uploads it back.

/*
  Hit 'ctrl + d' or 'cmd + d' to run the code, view console for results
*/
import { sp } from "@pnp/sp/presets/all";

(async () => {

console.log('downloading')
const blob: Blob = await sp.web.getFileByServerRelativeUrl("/sites/testsite/Shared%20Documents/50MB.zip").getBlob();
console.log('downloaded')

const file = new File([blob], '50MB2.zip');
console.log( file.size );

const uploadedfile = await sp.web.getFolderByServerRelativeUrl("/sites/testsite/Shared%20Documents").files.addChunked( '50MB2.zip', file, data => { console.log("progress " + data.blockNumber + " Stage " + data.stage + " chunkSize: " + data.chunkSize); }, true, 5000000);

console.log(uploadedfile)

})().catch(console.log)

[Ofer-Gal]

What is "SP Editor"?
how to change the "chunkSize" when calling .addChunked ?
Maybe the issue is the spaces in the name?
I will test with your version.

[tavikukko]

SP Editor is chrome extension, a SharePoint Developer Power Tool, there you can test your PNPJS snippets. Install it and press F12 and you will find SharePoint tab in the developer tools of Chrome.

[tavikukko]

I edited the sample above to add chunkSize 5000000

[Ofer-Gal]

Cool I will give it a try
Thank You
I see chunkSize goes at the end Thank you

[Ofer-Gal]

I see the difference in the usage and It could be I am doing it wrong.
My web part is installed on the Root Site Collection and it should upload to any Site Collection the code tells it.
So I change your code and ran it in the PnPjs Console

import { sp } from "@pnp/sp/presets/all";
import { Web } from "@pnp/sp/webs";
(async () => {

const web = await sp.web.select("Title")()
console.log("Web Title: ", web.Title);
const projectWeb = Web(window.location.origin + "/teams/T000.123");
const webT = await projectWeb.select("Title")()
console.log("projectWeb Web Title: ", projectWeb.name );
console.log(webT.Title);
console.log('downloading');
const blob: Blob = await projectWeb.getFileByServerRelativeUrl("/teams/T000.123/DPCDocuments/50MB Make Belive File.pptx").getBlob();
console.log('downloaded')
const file = new File([blob], '50MB Make Belive File Next.pptx');
console.log( file.size );
const uploadedfile = await projectWeb.getFolderByServerRelativeUrl("/teams/T000.123/DPCDocuments").files.addChunked( '50MB Make Belive File Next.pptx', file, data => { 
console.log("progress " + data.blockNumber + " Stage " + data.stage + " chunkSize: " + data.chunkSize); }, true, 5000000);
console.log(uploadedfile)

})().catch(console.log)

The downlod works fine but the upload errors the same as in my code right after the first chunk:

progress 1 Stage starting chunkSize: 5000000
Error: Error making HttpClient request in queryable [404] ::> {"odata.error":{"code":"-2130575338, Microsoft.SharePoint.SPException","message":{"lang":"en-US","value":"The file /teams/T000.123/DPCDocuments/50MB Make Belive File Next.pptx does not exist."}}}
at new HttpRequestError (sp.es5.umd.bundle.js:2353)
at Function.eval (sp.es5.umd.bundle.js:2368)
at step (sp.es5.umd.bundle.js:1891)
at Object.eval [as next] (sp.es5.umd.bundle.js:1872)
at fulfilled (sp.es5.umd.bundle.js:1862)

Thank you for the help and for a great PnPjs 👍

This Just in :-)
I did a test by adding the same DPCDocuments Library on the Root Site Collection and ran the script with:

const uploadedfile = await sp.web.getFolderByServerRelativeUrl("/DPCDocuments").files.addChunked(file.name,file, data => { 
console.log("progress " + data.blockNumber + " Stage " + data.stage + " chunkSize: " + data.chunkSize); }, true, 5000000);
console.log(uploadedfile)

It works fine. My conclusion is that files.addChunked Can only work with the current context Web.
Please advise.
Thanks

[tavikukko]

Actually there is a bug in PnPjs, PR with a fix submitted.

[Ofer-Gal]

Thank you for taking care.
Will the fix be available in 2.0.13 ?

[tavikukko]

2.0.13 will be released next friday (12/11/2020), and Im quite positive the PR will be merged to it.

[Ofer-Gal]

Thank you much.
Take the weekend off😉
The fact that I am working doesn't mean you should too.🤣

[koltyakov]

It's not a "work" work, so sometimes a weekend is the best time. ;)

[Ofer-Gal]

I got 2.0.13 by doing
npm i --save @pnp/sp@latest
And ran with 40mg file
on the second chunk It came back with the error:
Error making HttpClient request in queryable [404]
SP Editor is still on 2.0.12 so I did not test there.