3

Is there a custom control available (JavaScript/Jquery) which will help attaching multiple files in a sharepoint list. OOTB SharePoint allows attaching one by one.

Yes, we can use:

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

though it only works once and gets back to one file at a time mode second time. My Browser is IE and looking for a solution that works on it, so FILEREADER solutions won't work.

I'll for sure keep this thread updated if I am able to find or work something out. I am using office 365 and don't have the freedom to even use Sandbox/Farm solutions.

1

Why don't you use Asynchronous For loop and attach items to list using SpServices. That's one approach I would take.

  • But that doesn't answer my question of using 3rd party Jquery file uploader. Thanks for the approach though. – Taran Goel Jun 19 '15 at 12:57
1

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.

//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> 
0

SharePoint Server:

This jQuery method works for me. I use this for list and document libraries.

Multiple Files Upload Control in SharePoint

SharePoint Online:

For a front-end only solution, you can use the jQuery MultiFile library.

jQuery MultiFile

Read the section on "Selecting many files at once (HTML5)"

This SPServices example should help.

SPServices addAttachment jquery example

SPServices: jQuery Library for SharePoint Web Services

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

  • I should have been more clearer, I am using SharePoint online (Office 365). Though I tagged it but never mind, I'll update the question. – Taran Goel Jun 16 '15 at 5:58
  • just updated my answer...let me know if that helps – jpollar Jun 16 '15 at 14:06
  • Thanks for your help though it's still unclear how should i make the 3rd party upload controls to upload attachments to my SharePoint list item. – Taran Goel Jun 17 '15 at 9:39
  • Kindly update the jQuery MultiFile link. J – Taran Goel Jun 17 '15 at 9:40
  • Updating with a complete example using SPServices – jpollar Jun 17 '15 at 19:24
0

Multiple files upload to a SharePoint list item. As per the SharePoint Restriction and limitation, there is no way to attach multiple file to a SharePoint list item. You can attach one by one. Multiple upload is only possible for the SharePoint document Library and not SharePoint List

Below is the procedure explained to attach multiple files to a SharePoint list item.

Procedure:

  1. Create a new list item and provide a Title for the file as shown in the following fig.1. A new file with title Test for Multiple files Upload is created.

enter image description here

  1. Open the Document List in Datasheet view as shown in the Fig.2 below.

    enter image description here

  2. If you want to edit the previously created items then Double Click on the Attachment Icon of the list as shown in the Fig.3. For a newly created item there will not be any attachment icon as there are no files attached so double click on the blank space as shown in the Fig.4.

enter image description here enter image description here

  1. A new window for the file attachment will open. If you are editing the old item then there will be an attached file already available for the item as shown in the Fig.5 and you can click on Add if you want more files to be attached. If it is a new item then the attachments will be blank as in Fig.6 and then you can attach multiple files for that item. Click Add and select the number of files you want to add for that particular item.

enter image description here enter image description here

  1. You are done. As you can see the selected files are in the attachments dialog box. After clicking Ok you can now see the attachments Icon for the newly created item as shown in Fig.7. This means the files have been attached.

enter image description here enter image description here

  1. Now if you wish to check the files attached for that item. Switch back to Standard view and double click on the newly created item and there you can see the multiple files attached in one single go as shown in the Fig.8 below

enter image description here

This is my custom solution for the above mentioned SharePoint limitation, however it is not the best solution but it fulfills my need to quite extent without having any impact on performance.

  • That's a good workaround, though I'll need to check if I can get it work with Office 365. – Taran Goel Jun 18 '15 at 5:08
  • sure you can try this and if it works please mark the answer. – Manish Oswal Jun 18 '15 at 7:56

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.