1

I have a quite big HTML form (no infopath) and I need to add at least 2 attachment button/field on the same. Unfortunately I realized that i cannot because the "Attach" button works on the ID of the (first) attachment field which cannot be just duplicated.
Does anybody has a workaround in order to solve this?

1 Answer 1

2

You can create your own file control in HTML and use below script.

//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> 
2
  • 1
    Thanks for this, but I found more convenient to "move" the attach input form using child properties.
    – Marpio
    Commented May 15, 2017 at 13:06
  • @Marpio Can You addd more details how You did it?..
    – Gennady G
    Commented Jul 9, 2018 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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