SharePoint Pals
 | Sign In
How to Attach Multiple Files into SharePoint List Item Using SPServices and Also Validating on File Size and Format
by Ahamed Fazil Buhari 20 Jun 2016
Author
SharePoint Developer
Visits   
Today  :   16     Total  :    4521

I had a requirement to upload Multiple Files into the SharePoint list item. I need to implement this using Jquery, SPServices and the html tag <input type="file"/>.And we need to allow only the file formats namely - (pdf, jpeg, doc, docx, excel, xlsm, xls, xlsx, .ods,.zip, .rar) and restrict all other formats, also the upload maximum size will be 5 MB not more than that for each file.

I come up with the below step by step approach to achieve this requirement.

Step 1: Creation of Browse Button Using <input type=’file’ /> Tag.

Below is the HTML tag, I’ve used to create the browse button and some more buttons for additional functionality. Please concentrate and look only at <input type=’file’ /> tag

 <td id="fileAttachTD">
         <span id="attach">
             <input type="file" id="attach1" name="FileUpload" />br />
             <input type="file" id="attach2" name="FileUpload" /><input type="button" id="btnRemove2" /><br />
             <input type="file" id="attach3" name="FileUpload" /><input type="button" id="btnRemove3" /><br />
         </span>
         <br />
         <span id="AddRemoveBtn">
             <input type="button" id="btnAdd" value="Add New Attachment" /><br />
             <p id="lblAttchInfo">
                 Maximum 10 attachments, allowed formats (pdf, jpeg, doc, docx, excel, xlsm, xls,xlsx,.ods, .zip, .rar) - Maximum file size allowed for per attachment 5MB</p>
         </span>
     </td>
 

The output for the above tag will be shown as below,

clip_image002

Step 2: Read the Uploaded Multiple files and keeping it in an Array using Jquery

Here the 'input:file' event function is called based on the <td> id fileAttachTD, so that this event will get triggered when any browse button is clicked under this <td>.

The Script itself has all the required comments. I don’t have much to explain about the script.

 var maxFileSize = 5000000; //Set maximum file size value into a variable. 5 MB in bytes var fileName = []; // To keep track of uploaded file names
 var fileData = []; // Create an array to hold all the files
 var fileCount = 0; // To keep track on number of files uploaded into an array
 
 $('#fileAttachTD').on('change', 'input:file', function (event) {       
 
     //Getting the Target file
     var files = event.target.files;
     var file = files[0];
     if (files && file) {
         //Creating FileReader obj to read the uploaded file
         var reader = new FileReader();
 
         //Getting the File name
         fileName[fileCount] = file.name;
         reader.filename = file.name;
 
         //Getting the extention of the file
         var ext = file.name.match(/\.([^\.]+)$/)[1];
 
         //Getting the file size
         var fileSize = file.size;
 
         if (fileSize > maxFileSize)
             ext = 'sizeExceed';
         //var fileID = $(this).attr('id');
 
         //This is where the uploaded file will be read by 
         reader.onload = function () {
             //Validating the uploaded file Format
             switch (ext) {
                 case 'jpg':
                 case 'png':
                 case 'pdf':
                 case 'jpeg':
                 case 'docx':
                 case 'doc':
                 case 'excel':
                 case 'xlsm':
                 case 'xls':
                 case 'xlsx':
                 case 'ods':
                 case 'zip':
                 case 'rar':
                     //Put the file data into an array 
                     fileData[fileCount] = this.result;
                     var n = fileData[fileCount].indexOf(";base64,") + 8;
 
 //To Get the base64 bytes, remove the first part of the dataurl and //this we need to feed to SharePoint
                     fileData[fileCount] = fileData[fileCount].substring(n);
                     fileCount++;
                     break;
                 case 'sizeExceed':
                     fileData[fileCount] = '';
                     fileName[fileCount] = '';                    
                     alert('File size exceeded');
                     break;
                 default:
                     fileData[fileCount] = '';
                     fileName[fileCount] = '';                    
                     alert('Invalid format');
             }
         };
 
         reader.onabort = function () {
             alert("The upload was aborted.");
         };
 
         reader.onerror = function () {
             alert("An error occured while reading the file.");
         };
         reader.readAsDataURL(file);
     }
 });
 

Step 3: Adding Attachments to the List Item using SPServices

Finally, uploading all the files into the list item using SPServices.

If the uploading of attachment needs to be done for the New List Item, then the below function should be called after the List Item is successfully created and then that Item ID should be passed as a parameter.

 //Function to Upload the Attachment, 
 //Parameter - itemID, List Item ID where the attachment needs to be uploaded
 function AddAttachments(itemID) {
 //Retrieving all the files which are available in an Array, Created this Array in //the above step(Step 2)
     for (var i = 0; i < fileCount; i++) {
         if (fileData[i] != '')
             $().SPServices({
                 operation: 'AddAttachment',
                 async: false,
                 listName: 'Name of the List',
                 listItemID: itemID,
                 fileName: fileName[i],
                 attachment: fileData[i],
                 completefunc: function (xData, Status) {
                 }
             });
     }
 }
 

Happy Coding,

Ahamed Buhari

blog comments powered by Disqus

SharePoint Pals

Pals
SharePoint Pals, a community portal for SharePoint developers, Administrators and End Users. Let's join hands and share the point together.
Read this on mobile

Training

Angular Js Training In Chennai
Advanced Angular Js training with real world developer scenarios
Angular Js, Web Api and Ionic for .Net Developers
All in one client side application development for .Net developers
Angular Js For SharePoint Developers
Get ready for the future. Its no more just C#

Get Connected

SharePoint Resources

SharePoint 2013 and 2010 Web Parts
Free Web Parts with Source Code for SharePoint Community




SharePoint 2013 Books and Tutorials
Collection of free SharePoint 2013 books and tutorials (eBooks, pdfs)

Supported By

Contribute your article and be eligible for a one month Free Subscription for Plural Sight. The Author of the most popular New Article (published in the previous month) will be awarded with a Free One month Plural Sight Subscription. Article can be sent to articles@sharepointpals.com in a word document.

Related Resources

Recent Tweets

Twitter January 15, 00:25
How To Enable Target Value And Actual Value In #D3 Gauge Chart https://t.co/VxSi4QnNrC

Twitter January 15, 00:24
How To Open #SharePoint List Hyperlink Column In Modal #Popup Window https://t.co/EQ7HkoZDkX

Twitter January 15, 00:24
Quick Introduction To #Asp.NetCore And It’s Features https://t.co/zAXObHCFpH

Twitter January 15, 00:22
How To Configure #PerformancePoint Services To Use Secure Store In #SharePoint 2013 https://t.co/LEwnUoI7EY

Twitter January 15, 00:21
How To Block Or Disable #Office365 Services https://t.co/Yvp2VPFIRP

Follow us @SharePointPals
Note: For Customization and Configuration, CheckOutRecent Tweets Documentation