Uploading multiple attachments to the lists using JSOM

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"

	<div class="fld">
	<div>
	<span>First Name</span>
	<span><input type="text" id="txtFirstName"></span>
	</div>
	<div>
	<span>Last Name</span>
	<span><input type="text" id="txtLastName"></span>
	</div>
	Attach any relevant files
	<div class="files" id="attachFilesContainer">
	<input id="infringementFiles" type="file" class="multi browsebtn" />
	</div>
	</div>
	<div class="fld">
	<input class="btn" id="btnSubmit" value="Submit" type="button" />
	</div>

view raw FileUpload hosted with ❤ by GitHub

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

	$(function () {
	var fileCountCheck = 0;
	$("#btnSubmit").click(function () {
	var data = [];
	var fileArray = [];
	$("#attachFilesContainer input:file").each(function () {
	if ($(this)[0].files[0]) {
	fileArray.push({ "Attachment": $(this)[0].files[0] });
	}
	});
	data.push({"FirstName": $("#txtFirstName").val().trim(), "LastName": $("#txtLastName").val().trim(), "Files": fileArray});
	createItemWithAttachments("MyList", data).then(
	function(){
	alert('Item created with Multiple attachments');
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	);
	});
	.....
	});

view raw FileUpload1 hosted with ❤ by GitHub

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

	$("#attachFilesContainer input:file").each(function () {
	if ($(this)[0].files[0]) {
	fileArray.push({ "Attachment": $(this)[0].files[0] });
	}
	});

view raw FileArray.js hosted with ❤ by GitHub

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

	var createItemWithAttachments = function(listName, listValues){
	var fileCountCheck = 0;
	var fileNames;
	var context = new SP.ClientContext.get_current();
	var dfd = $.Deferred();
	var targetList = context.get_web().get_lists().getByTitle(listName);
	context.load(targetList);
	var itemCreateInfo = new SP.ListItemCreationInformation();
	var listItem = targetList.addItem(itemCreateInfo);
	listItem.set_item("FirstName", listValues[0].FirstName);
	listItem.set_item("LastName", listValues[0].LastName);
	listItem.update();
	context.executeQueryAsync(
	function () {
	var id = listItem.get_id();
	if (listValues[0].Files.length != 0) {
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck).then(
	function () {
	},
	function (sender, args) {
	console.log("Error uploading");
	dfd.reject(sender, args);
	}
	);
	}
	}
	else {
	dfd.resolve(fileCountCheck);
	}
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	);
	return dfd.promise();
	}

view raw insertlistityem.js hosted with ❤ by GitHub

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

	function loopFileUpload(listName, id, listValues, fileCountCheck) {
	var dfd = $.Deferred();
	uploadFile(listName, id, listValues[0].Files[fileCountCheck].Attachment).then(
	function (data) {
	var objcontext = new SP.ClientContext();
	var targetList = objcontext.get_web().get_lists().getByTitle(listName);
	var listItem = targetList.getItemById(id);
	objcontext.load(listItem);
	objcontext.executeQueryAsync(function () {
	console.log("Reload List Item- Success");
	fileCountCheck++;
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck);
	} else {
	console.log(fileCountCheck + ": Files uploaded");
	alert('Item created with Multiple attachments');
	}
	},
	function (sender, args) {
	console.log("Reload List Item- Fail" + args.get_message());
	});
	},
	function (sender, args) {
	console.log("Not uploaded");
	dfd.reject(sender, args);
	}
	);
	return dfd.promise();
	}

view raw Loop File Upload.js hosted with ❤ by GitHub

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

spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')",

view raw resturl.js hosted with ❤ by GitHub

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

	<script type="text/javascript" src="/teams/MySCForApps/Style Library/JS/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="/teams/MySCForApps/Style Library/JS/jquery-ui.js"></script>
	<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
	<script type="text/javascript" src="/_layouts/15/sp.js"></script>
	<script type="text/javascript" src="/teams/MySCForApps/Style Library/JS/jquery.MultiFile.js"></script>
	<link rel="Stylesheet" type="text/css" href="../CSS/App.css" />
	<script language="javascript" type="text/jscript">
	$(function () {
	var fileCountCheck = 0;
	$("#btnSubmit").click(function () {
	var data = [];
	var fileArray = [];
	$("#attachFilesContainer input:file").each(function () {
	if ($(this)[0].files[0]) {
	fileArray.push({ "Attachment": $(this)[0].files[0] });
	}
	});
	data.push({"FirstName": $("#txtFirstName").val().trim(), "LastName": $("#txtLastName").val().trim(), "Files": fileArray});
	createItemWithAttachments("MyList", data).then(
	function(){
	alert('Item created with Multiple attachments');
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	)
	});
	var createItemWithAttachments = function(listName, listValues){
	var fileCountCheck = 0;
	var fileNames;
	var context = new SP.ClientContext.get_current();
	var dfd = $.Deferred();
	var targetList = context.get_web().get_lists().getByTitle(listName);
	context.load(targetList);
	var itemCreateInfo = new SP.ListItemCreationInformation();
	var listItem = targetList.addItem(itemCreateInfo);
	listItem.set_item("FirstName", listValues[0].FirstName);
	listItem.set_item("LastName", listValues[0].LastName);
	listItem.update();
	context.executeQueryAsync(
	function () {
	var id = listItem.get_id();
	if (listValues[0].Files.length != 0) {
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck).then(
	function () {
	},
	function (sender, args) {
	console.log("Error uploading");
	dfd.reject(sender, args);
	}
	);
	}
	}
	else {
	dfd.resolve(fileCountCheck);
	}
	},
	function(sender, args){
	console.log('Error occured' + args.get_message());
	}
	);
	return dfd.promise();
	}
	function loopFileUpload(listName, id, listValues, fileCountCheck) {
	var dfd = $.Deferred();
	uploadFile(listName, id, listValues[0].Files[fileCountCheck].Attachment).then(
	function (data) {
	var objcontext = new SP.ClientContext();
	var targetList = objcontext.get_web().get_lists().getByTitle(listName);
	var listItem = targetList.getItemById(id);
	objcontext.load(listItem);
	objcontext.executeQueryAsync(function () {
	console.log("Reload List Item- Success");
	fileCountCheck++;
	if (fileCountCheck <= listValues[0].Files.length - 1) {
	loopFileUpload(listName, id, listValues, fileCountCheck);
	} else {
	console.log(fileCountCheck + ": Files uploaded");
	alert('Item created with Multiple attachments');
	}
	},
	function (sender, args) {
	console.log("Reload List Item- Fail" + args.get_message());
	});
	},
	function (sender, args) {
	console.log("Not uploaded");
	dfd.reject(sender, args);
	}
	);
	return dfd.promise();
	}
	function uploadFile(listName, id, file) {
	var deferred = $.Deferred();
	var fileName = file.name;
	getFileBuffer(file).then(
	function (buffer) {
	var bytes = new Uint8Array(buffer);
	var binary = '';
	for (var b = 0; b < bytes.length; b++) {
	binary += String.fromCharCode(bytes[b]);
	}
	var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
	console.log(' File size:' + bytes.length);
	$.getScript(scriptbase + "SP.RequestExecutor.js", function () {
	var createitem = new SP.RequestExecutor(_spPageContextInfo.webServerRelativeUrl);
	createitem.executeAsync({
	url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')",
	method: "POST",
	binaryStringRequestBody: true,
	body: binary,
	success: fsucc,
	error: ferr,
	state: "Update"
	});
	function fsucc(data) {
	console.log(data + ' uploaded successfully');
	deferred.resolve(data);
	}
	function ferr(data) {
	console.log(fileName + "not uploaded error");
	deferred.reject(data);
	}
	});
	},
	function (err) {
	deferred.reject(err);
	}
	);
	return deferred.promise();
	}
	function getFileBuffer(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();
	}
	});
	</script>
	<div class="fld">
	<div>
	<span>First Name</span>
	<span><input type="text" id="txtFirstName"></span>
	</div>
	<div>
	<span>Last Name</span>
	<span><input type="text" id="txtLastName"></span>
	</div>
	Attach any relevant files
	<div class="files" id="attachFilesContainer">
	<input id="infringementFiles" type="file" class="multi browsebtn" />
	</div>
	</div>
	<div class="fld">
	<input class="btn" id="btnSubmit" value="Submit" type="button" />
	</div>

view raw FileUpload.html hosted with ❤ by GitHub

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