Pnpjs: Upload multiple files to SP document library

Created on 29 Jun 2020 · 5Comments · Source: pnp/pnpjs

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the Docs to see if your question is already addressed there. This will help us ensure our documentation covers the most frequent questions.

Version

Please specify what version of the library you are using: [2.0.6 ]

I just want to to know is there any way to upload multiple files to SharePoint document library using PNP JS. I do not find any documents related to multiple file uploads in https://pnp.github.io/pnpjs/sp/files/ . I know that we can upload multiple attachments to a SharePoint list, not sure if multiple file uploads to a doc library possible.

code answered question

Source

Bijoykrishna6398

Most helpful comment

@koltyakov I am creating the folder outside of the loop but forgot to update it in the comment. Thank you for your response, I will follow your step.

Bijoykrishna6398 on 29 Jun 2020

👍2

All 5 comments

Currently, I am using the below approach to upload multiple files. Please let me know if this is an ideal solution to handle it.

jsonData.fileInfos.map((filedata) => 
      {
        sp.web.folders.add("/sites/MySharepoint/Shared Documents/My_Sub_Folder/").then((data) => {
          sp.web.getFolderByServerRelativeUrl(data.data.ServerRelativeUrl).files.add(filedata.name, filedata.content, true)
        })
      }
      )

Bijoykrishna6398 on 29 Jun 2020

Hi @Bijoykrishna6398,

There is almost no sense in any API of having separate methods creating multiple entities, with an exception of some edge cases of mass processing in queues. In common cases the price of sending requests in a queue is nothing.

Basically, what you do is the right approach. Thought, calling many async calls in a map/foreach might not be completely correct, as the requests are uncontrollably simultaneous. Also, the part with the folders doesn't look great, I'd suggest moving folder creation/getter outside the loop, your sample but a bit refactored:

import { sp, IFolder, IFileAddResult } from '@pnp/sp/presets/all';

const filesUploadQueue = async (
  folder: IFolder,
  files: File[],
  shouldOverwrite = false,
  parallel = false,
  processCallback?: (file: File, i: number) => void
): Promise<IFileAddResult[]> => {

  // In parallel with Promise.all
  if (parallel) {
    return Promise.all(files.map((file) => {
      return folder.files.add(file.name, file, shouldOverwrite)
    }));
  }

  // Sequentially each file by each
  const res: IFileAddResult[] = [];
  let i = 0;
  for (const file of files) {
    const r = await folder.files.add(file.name, file, shouldOverwrite);
    if (typeof processCallback === 'function') {
      processCallback(file, ++i);
    }
    res.push(r);
  }
  return res;

};

(async () => {

  const files: File[] = []; // get from from inputs...

  const { folder } = await sp.web.folders.add('/sites/ci/Shared Documents/My_Sub_Folder');

  await filesUploadQueue(folder, files, true, false,
    (_, i) => console.log(`${i} of ${files.length}`));

})().catch(console.log)

koltyakov on 29 Jun 2020

@koltyakov I am creating the folder outside of the loop but forgot to update it in the comment. Thank you for your response, I will follow your step.

Bijoykrishna6398 on 29 Jun 2020

👍2

This would be a great candidate for an extension method within your project. Then you can use the method inline as part of the library while ensuring you have just the functionality you want.