3

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?

2

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> 
  • We are developing Provider Hosted App. We are writing full customized code. No OOB from code only we have to handle. – Jaydeep Shil Sep 24 '15 at 6:32
  • didn't understand your point! – Taran Goel Sep 24 '15 at 6:33
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.