Uploading multiple attachments to the lists using JSOM

In the previous blog post, we have seen how to attach a single file to the list item

In this blog post we will see how we can attach multiple attachments to a list item using JSOM. The following code will work in both SharePoint hosted apps and regular SPO web applications

The following technologies are referred/used in  the blog post

1. jquery.multifile.js
2. jquery
3. SPO client side libraries

Not much information is available in the internet to attach multiple files to the list items.

In your custom form, where you want to attach multiple files, add the following html tags which will facilitate the user to attach multiple files to the list item

As part of this post, we assume that, we have list called "MyList" and in that list we have two list columns called "FirstName" and "LastName"

When we insert data to this list, we also attach multiple list items. The below code snippet will show the simple html that has been created for the user to insert data into the list called "MyList"



As you can see in the above code snippet, I have two html text boxes for FirstName and LastName and a file input control.

To facilitate multi file upload control, I am leveraging "jquery.multifile.js" plugin. If we don't use that plugin, the user will select only one input file for upload

When the user selects multiple files, here is how the UI looks like

 

As you can, with the help of jquery plug in, we can select multiple files. The complete UI will look like this

I also have a submit button and on click of that button, I want to insert a new list item as well as attach as the files that user has selected

On click of btnSubmit, all the files that are selected by the user will be attached to the list item.

Here is the code snippet for the btnSubmit click event. I have written this click event in the jquery document load function



As a first step, loop all the attachments the user as selected and push that information into some javascript array. That javascript array function will just have the file information and not the contents of that file



Create another JSON array, to hold all the values the user has entered such as first name, last name etc. and including the file array that has been created above

data.push({"FirstName": $("#txtFirstName").val().trim(), "LastName": $("#txtLastName").val().trim(), "Files": fileArray});

After this, I have written some function will insert list item also attach the list items also



I am using regular JSOM code for creating the list items. Since attachments has to be inserted  to the newly created item, I need to know the ID to which I need to insert the attachments

So, first I will insert/create the data, get the list id and to that list id, we need to insert attachments


After the getting the list id, I will loop with all the attachments the user has selected. I wont resolve the function, till I insert all the list attachments. If all the attachments are inserted, I will resolve the function

loopFileUpload function need to called recursively till all the list attachments are inserted



As you can see in the above function, loopFileUpload has been called recursively till all the list attachments are inserted

With in the loopFileUpload function, I am calling another function called uploadFile which will associate the list attachment to the id that has been passed to that function



Within the uploadFile function, I am calling another function called, getFileBuffer, will will read the actual contents of the file and pass that information to uploadFile function

We are using REST based approach for inserting the list attachments as REST will allow to upload upto 2 GB of file

Here is the url that needs to be used to access the list item id to which we need to insert the list attachment




Here is the complete source code of the page that I used for this blog post



Here is the snapshot of the list item that got created using this code with multiple attachments
 

Using jquery templates to display sharepoint list data on the client side using JSOM

The following post will provide a scenario where you want to format sharepoint list data data using jquery template and everything on the client side using JSOM

As every body might aware that SharePoint online wont allow server side coding and everything needs to be written on the client side only

In the SharePoint online world, the developer should be using JSOM to retrieve the sharepoint data. Once the data is retrieved, the data should be presented to the user in a presentable way and in this post we will see how you can use jQuery, jQuery Templates to display SharePoint list data.

For this post, I will consider a SharePoint list called Customers and I have the following list columns inside that Customers list

1. First Name
2. Last Name
4. Email

When displaying the data, I wanted to combine First Name and Last Name and I want the email to be an hyperlink for the First Name and Last Name and I want to display the data as an unordered list. The final output will look something like this

This post will explain how we can do the same in SharePoint online using JSOM, JQuery and JQuery Templates

The first step in getting the data from the sharepoint list is to get reference to SharePoint and to get a reference to SharePoint context we need to load required Sharepoint JS file and the JS that needs to be loaded is SP.js. The following code snipped will show that information


In the above function we have created a small function called GetSharePointListData and to that function we are passing the list name and the CAML query that needs to be executed on the list, there is also an anonymous function called OnGetSuccess and we will discuss more on this later in this post
We have created another function called getData and in this function we will fire a request to SharePoint and fetch the data.



The following code will show the information on how to get context to SharePoint



Once you get a context to SharePoint, the next step will be, try to get context to the current web and the list from which you want to retrieve the list items and display the results




Once we set all the context, fire an async request to SharePoint and the following code will show that information



In order to display the data in the format that we require, we need to store the data on the client side that is retrieved from the SharePoint.

To store the data on the client side, we will use JSON and in the above code snippet, we are using dataset[] variable for that purpose.

For each and every item that we are getting from the sharepoint, we are storing that information in JSON array and we are using the following code snippet to store the data into JSON array



 Once we get all the data, we return the data from the function using the anonymous function that we are passing as a parameter to _getData function

onGetSuccess(that.DataSet);

that.DataSet contains all the sharepoint list data in json format. The following code will show how the list data looks like in JOSN format



If there is any error that SharePoint returns, we are capturing that information in another anonymous function and in that function we are calling another function called _onFail and in that function you can capture sharepoint error and update the UI accordingly.

Once we have the JSON data, we can make use of JQuery and JQueryTemplate plugins to display the data accordingly. We can make use of other plugins such as UnderScore or some other plugins for displaying the data. In this post we are using jQueryTemplates for displaying the data

The following code will show, how we can call the function GetSharePointListData and pass the required parameters. The following code snippet will show that information

GetSharePointListData(spListName, camlQuery, function (data) {
    $("#customerTemplate").tmpl(data).appendTo("#ulCustomer");
});

 In the above code snippet, #customerTemplate is the jquery template where we have written how the data should be displayed and formatted and more on this later in this post

To that template we are passing the data (JSON data) and we are appending the completed HTML to ul tag with the name "ulCustomer"

The following code snippet will show customerTemplate html template with the place holders for the data that is coming from JSON data



I am displaying the data in un-ordered list format, where FirstName and LastName becoming an hyperlink and on clicking of the hyperlink, default email client will open

The final output of the data will look like this

References

jQuery Template: http://plugins.jquery.com/loadTemplate/1.4.4/

Let me know your comments on this post