SharePoint 2013 add multiple attachment to a List at one shot

Question

I have to attach multiple document as an attachment to a List item, I want to achieve this functionality at one shot.

I have found a few examples where using loop they are adding the attachments. Is there any way that I can do this at single call?

Answer 1

Use OOTB atach file option (Not UI firiendly) :

$(".ms-fileinput").attr("multiple","multiple");

Next, you can create your own file control in HTML and hook it up with the below script. I use an asynchronous loop to iterate through the files (works in IE9).

//Enable Multiple Upload Script

$('.attachmentButton').change(function(event){  
//alert("change");  
//startUpload(self, function (){ reloadPage(); }, event);   
$("#WSOutput").html("<b>Please wait while files are getting attached. </b>");
 var listName = claimHeaderList; // change these to suit your list and item
 selectedFilesLength = event.target.files.length;
            asyncLoop({
    length : event.target.files.length+1,
    functionToLoop : function(loop, i){
        setTimeout(function(){
            //document.write('Iteration ' + i + ' <br>');

            handleFileChange(listName,itemId,event.target.files[i],i);
            loop();
        },10);
    },
    callback : function(){
    location.reload();
    //document.write('All done!');
    }    
});

});   


 });

 var asyncLoop = function(o){
    var i=-1;

    var loop = function(){
        i++;
        if(i==o.length){o.callback(); return;}
        o.functionToLoop(loop, i);
    } 
    loop();//init
}

 function handleFileChange(listName,itemId,file,length,_callback){
 //alert(length+"selectedFilesLength:" + selectedFilesLength );
 if( !(length==selectedFilesLength))
 {

 //alert(file.name);
  var deferred = $.Deferred();
 var getFileBuffer = function(file) {

  var deferred = $.Deferred();
  var reader = new FileReader();

  reader.onload = function(e) {
    deferred.resolve(e.target.result);
  }

  reader.onerror = function(e) {
    deferred.reject(e.target.error);
  }

  reader.readAsArrayBuffer(file);

  return deferred.promise();
};
   getFileBuffer(file).then(function(buffer) {
  var binary = "";
  var bytes = new Uint8Array(buffer);
  var i = bytes.byteLength;
  while (i--) {
    binary = String.fromCharCode(bytes[i]) + binary;
  }
  $("#WSOutput").html("<b>Please wait while files are getting attached. </b>").SPServices({
    operation: "AddAttachment",
    async: false,
    listName: listName,
    listItemID: itemId,
    fileName: file.name,
    attachment: btoa(binary),
    completefunc: function (xData, Status) {
        //$("#WSOutput").html("");
                }
  });
}); 
//_callback(); 
}

---

HTML:

<input type="file" multiple="multiple" class="attachmentButton" name="attachmentButton"/>
<div id="WSOutput"> &#160;</div> 

Answer 2

If you use JQuery multi-file.js, you can have a multi-file select control that lets you upload multiple files at the same time.

Get JQery MultiFile JS here

Follow this post around how to implement multipe attachments.

AFAIK, there is no way to upload multiple files with a single call.