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,

<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<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).

var fileInfos = []

Create Jquery onchage event to convert the upload files into blob using “blob()” function.

//Pass the File Upload control id
   $(document).ready(function() {
      $('#exampleFormControlFile1').on('change'function() {
      blob();
   });
});

Create Function blob() to convert the uploaded files to blog using javascript FileReader().

function blob() {
   //Get the File Upload control id
   var input = document.getElementById("exampleFormControlFile1");
   var fileCount = input.files.length;
   console.log(fileCount);
   for (var i = 0; i < fileCount; i++) {
      var fileName = input.files[i].name;
      console.log(fileName);
      var file = input.files[i];
      var reader = new FileReader();
      reader.onload = (function(file) {
         return function(e) {
            console.log(file.name);
            //Push the converted file into array
               fileInfos.push({
                  "name": file.name,
                  "content": e.target.result
                  });
               console.log(fileInfos);
               }
         })(file);
      reader.readAsArrayBuffer(file);
    }
//End of for loop
}
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

 

function uploadListAttachments() {  
    var item = $pnp.sp.web.lists.getByTitle("demopoc2").items.getById(1);  
    item.attachmentFiles.addMultiple(fileInfos).then(v => {  
        console.log(v);  
    }).catch(function(err) {  
        alert(err);  
    });  
}
HTML Snippet
<!-- HTML Snippet-->
<div id="fileUploader">
   <input type="file" id="exampleFormControlFile1" name="myfiles" multiple="multiple">
   <button type="button" onclick="uploadListAttachments();">Upload</button> //Call the upload function
</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 web-part or script editor web-part
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

<script src="https://code.jquery.com/jquery-3.3.1.min.js"type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sp-pnp-js/3.0.10/pnp.min.js"type="text/javascript"></script>
<script type="text/javascript">
var fileInfos = [];
$(document).ready(function() {
$('#exampleFormControlFile1').on('change', function() {
blob();
});
});

function uploadListAttachments() {
varitem = $pnp.sp.web.lists.getByTitle("demopoc2").items.getById(1);
item.attachmentFiles.addMultiple(fileInfos).then(v=> {
console.log(v);
}).catch(function(err) {
alert(err);
});
}

function blob() {
varinput = document.getElementById("exampleFormControlFile1");
varfileCount = input.files.length;
console.log(fileCount);
for (var i = 0; i < fileCount; i++) {
var fileName = input.files[i].name;
console.log(fileName);
var file = input.files[i];
var reader = new FileReader();
reader.onload = (function(file) {
returnfunction(e) {
console.log(file.name);
fileInfos.push({
"name":file.name,
"content":e.target.result
});
console.log(fileInfos);
}
})(file);
reader.readAsArrayBuffer(file);
}
//End of for loop
}
</script>

<!--HTML Snippet-->

<div id="fileUploader">
<inputtype="file" id="exampleFormControlFile1"name="myfiles"multiple="multiple">
<buttontype="button" onclick="uploadListAttachments();">Upload</button>
</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!...

Leave a Comment