In this article, I have explained how to upload multiple files as an attachment into a SharePoint list using PNP JS. Add the two script references- jQuery and Pnp Js from the CDN,
  1. <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js" type="text/javascript"></script>
Create one array variable globally to store the multiple file content as Blob- (Binary Large Object Data).
  1. var fileInfos = []
Create Jquery onchage event to convert the upload files into blob using "blob()" function.
  1. //Pass the File Upload control id
  2. $(document).ready(function() {
  3. $('#exampleFormControlFile1').on('change', function() {
  4. blob();
  5. });
  6. });
Create Function blob() to convert the uploaded files to blog using javascript FileReader().
  1. function blob() {
  2. //Get the File Upload control id
  3. var input = document.getElementById("exampleFormControlFile1");
  4. var fileCount = input.files.length;
  5. console.log(fileCount);
  6. for (var i = 0; i < fileCount; i++) {
  7. var fileName = input.files[i].name;
  8. console.log(fileName);
  9. var file = input.files[i];
  10. var reader = new FileReader();
  11. reader.onload = (function(file) {
  12. return function(e) {
  13. console.log(file.name);
  14. //Push the converted file into array
  15. fileInfos.push({
  16. "name": file.name,
  17. "content": e.target.result
  18. });
  19. console.log(fileInfos);
  20. }
  21. })(file);
  22. reader.readAsArrayBuffer(file);
  23. }
  25. //End of for loop
  27. }
Then call the upload attachments function to attach files for the list item
For single upload calls you can use "attachmentFiles.add"
Here I am going to upload multiple files for the particular list item Id "attachmentFiles.addMultiple"
  1. function uploadListAttachments() {
  2. var item = $pnp.sp.web.lists.getByTitle("demopoc2").items.getById(1);
  3. item.attachmentFiles.addMultiple(fileInfos).then(v => {
  4. console.log(v);
  5. }).catch(function(err) {
  6. alert(err);
  7. });
  8. }
HTML Snippet
  1. <!-- HTML Snippet-->
  3. <div id="fileUploader">
  4. <input type="file" id="exampleFormControlFile1" name="myfiles" multiple="multiple">
  5. <button type="button" onclick="uploadListAttachments();">Upload</button> //Call the upload function
  6. </div>
Now I am navigating to the Sharepoint list for that particular item. It has no attachment,
Upload Multiple File Attachment Into SharePoint List Using PNP JS
So upload the snippet into content editor webpart or script editor webpart
Upload Multiple File Attachment Into SharePoint List Using PNP JS
Click on the "Choose File" button to upload the file,
Upload Multiple File Attachment Into SharePoint List Using PNP JS
Upload Multiple File Attachment Into SharePoint List Using PNP JS
Click on the "Upload" button to add the attachment file for the Sharepoint list item
The attachment has been uploaded successfully.
Upload Multiple File Attachment Into SharePoint List Using PNP JS
Full Code
  1. <script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. var fileInfos = [];
  6. $(document).ready(function() {
  7. $('#exampleFormControlFile1').on('change', function() {
  8. blob();
  9. });
  10. });
  13. function uploadListAttachments() {
  14. var item = $pnp.sp.web.lists.getByTitle("demopoc2").items.getById(1);
  15. item.attachmentFiles.addMultiple(fileInfos).then(v => {
  16. console.log(v);
  17. }).catch(function(err) {
  18. alert(err);
  19. });
  20. }
  23. function blob() {
  24. var input = document.getElementById("exampleFormControlFile1");
  25. var fileCount = input.files.length;
  26. console.log(fileCount);
  27. for (var i = 0; i < fileCount; i++) {
  28. var fileName = input.files[i].name;
  29. console.log(fileName);
  30. var file = input.files[i];
  31. var reader = new FileReader();
  32. reader.onload = (function(file) {
  33. return function(e) {
  34. console.log(file.name);
  35. fileInfos.push({
  36. "name": file.name,
  37. "content": e.target.result
  38. });
  39. console.log(fileInfos);
  40. }
  41. })(file);
  43. reader.readAsArrayBuffer(file);
  44. }
  46. //End of for loop
  48. }
  49. </script>
  50. <!-- HTML Snippet-->
  52. <div id="fileUploader">
  53. <input type="file" id="exampleFormControlFile1" name="myfiles" multiple="multiple">
  54. <button type="button" onclick="uploadListAttachments();">Upload</button>
  55. </div>
Note
In a Sharepoint list you can only attach the file after the successful creation of a Sharepoint list -- it works as an update only.
Sharing is caring!...