1

The OOTB attaching of files in a share point list is a one by one process. I wanted to create a front end solution which would enable multiple attachment of files at once. I researched a lot and the obvious solution was to use a JQuery based multiple upload plugin. The problem i faced was every 3rd party plugin i found worked on PHP based site where the uploading of file is handled automatically. Is there a way such that we can use the plugin to work with SharePoint List/document library, maybe I can alter the code at the backend of the plugin. Any help or suggestion to achieve this will immensely help.

The plugin I am trying to hook up with SharePoint is jQuery File Upload

Thanks for all your help!

  • I failed to understand the down vote! – Taran Goel Jun 17 '15 at 10:44
  • 2
    "Help me setup a 3rd party library" is not really a question. Describe your problem with the setup, what you tried and where you are stuck and maybe someone can help. But as it is, it is way too broad, maybe even better suited for chat. – Dolgsthrasir Jun 17 '15 at 10:53
  • I agree with you, thanks for your feedback. I have updated the question. J – Taran Goel Jun 17 '15 at 16:05
  • What browsers are you targeting with your solution? – Bernd Rickenberg Jul 27 '15 at 8:58
2
+50

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

I have implemented something like this for SP2010 using PLUpload. I had to create a custom HTTP Handler (.ashx file) for the server side interaction with SP. Considering you are on SP Online though, server side code is not an option.

Maybe you can use the jQuery File Upload API to interact with SharePoint's REST API? For SP Online, that's the approach I would take.


As far as references, for the jQuery File Upload plugin, the best I can do is refer you back to what you already linked to, the plugin's documentation page, API page, and options page on GitHub.

For the SP2013 REST API, there are several good places to start on MSDN:

REST API reference and samples

Get to know SharePoint 2013 REST service

REST API reference for SharePoint 2013

I'm sure there are plenty of other resources you can find with a quick search.

In addition, you might want to check out SPServices, a jQuery library that makes working with SharePoint web services much easier.

  • I was thinking the same, making Jquery API to interact with SharePoint's. Is there any link you can provide that can guide me a little. Thanks..J – Taran Goel Jun 18 '15 at 5:06
  • @TaranGoel, updated my answer with some links. – Dylan Cristy Jun 18 '15 at 13:47
  • I am sorry but I am still not able to hookup up the Jquery upload function with sharepoint. Thnaks for your help though..:/ – Taran Goel Jun 23 '15 at 5:43
  • Why the downvotes? OP stated "Any help or suggestion to achieve this will immensely help.", I think suggesting to look into using SP's web services is perfectly reasonable. – Dylan Cristy Jul 27 '15 at 13:54

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.