How to use 3rd party JQuery file uploader with SharePoint

Question

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!

Answer 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> 

Answer 2

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.