Post
Ask Question

Upload Multiple File Attachment Into SharePoint List Using PNP JS

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 = [];  
  5.   
  6.     $(document).ready(function() {  
  7.         $('#exampleFormControlFile1').on('change', function() {  
  8.             blob();  
  9.         });  
  10.     });  
  11.   
  12.   
  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.     }  
  21.   
  22.   
  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);  
  42.   
  43.             reader.readAsArrayBuffer(file);  
  44.         }  
  45.   
  46.         //End of for loop  
  47.   
  48.     }  
  49. </script>    
  50. <!-- HTML Snippet-->  
  51.   
  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!...


Similar Articles