Despite my preference for using CSS to customize the user experience for a Dynamics 365 Portal, as expressed in my last post, unfortunately CSS can’t do everything. Continuing on with the theme of the Dynamics 365 Portal integration with SharePoint, this post talks about using JavaScript to perform additional validation on the uploaded files.

Validating the Files Uploaded to SharePoint

I probably don’t need to explain to you why someone would want additional validation on the files uploaded to SharePoint – there are a lot of use cases. Some common examples include limiting files size, types, and quantities. The good news is, if you can perform your logic in JavaScript, then adding the additional validation is actually pretty straight forward.

Out-of-the-box SharePoint File Upload Validation

If all you are concerned about is making sure people don’t upload files that are too big, you’re in luck! There is an out-of-the-box Site Setting called SharePoint/MaxUploadSize that does just that. By default the Portal doesn’t allow files larger than 10 MB, but you can use this setting to increase that maximum up to 50 MB.

Custom Validation using JavaScript

If you’re not familiar with the user experience of adding files to a SharePoint library, it’s a multi-step process. You begin by clicking the Add files button, which opens a modal popup, where you are able to select the files using a standard HTML file input control. After selecting the files, you then click another Add files button to perform the actual upload.

The technique I use to validate the files is to hook into the change event of the HTML file input control, allowing me to validate the files before the user uploads them. If the validation fails, I clear the control, meaning the user isn’t able to upload those files.

Using developer tools, we can find out how to target the file input. The below code show a simple validation function, which fails validation every time:

$('.modal-add-file .margin-addfile input').change(function() {
	var self = $(this);
	var valid = false;	

	if (!valid) {
		// clear the input so that the user can't submit the form
		self.val('');
	}	
});

Now, let’s make the validation a bit more complex. In this example, I’ll validate two things:

1. I only want the user to upload at most 3 documents (in total, including any documents previously uploaded)
2. I only want the user to upload PNG and JPEG images

The code to do that is as follows:

$('.modal-add-file .margin-addfile input').change(function() {
	// check to see how many files have already been uploaded, and only allow the upload if it won't exceed the limit of 3
	var existingFiles = $('.sharepoint-data tr').length - 1;
	var self = $(this);
	if (existingFiles + self[0].files.length > 3) {
		alert('You can only upload up to 3 files.');
		self.val('');
		return;
	}

	// loop through each file to validate that the type is correct
	$.each(self[0].files, function(i, e) {
		var validTypes = ['image/jpeg','image/png'];
		if (validTypes.indexOf(e.type) < 0) {
			alert('Your file should be an image (JPEG or PNG).');
			self.val('');
			return false;
		}
	});
});

A couple "interesting" things to point out:

• The technique I'm using to get the number of files uploaded is to count the number of rows in the table (and to minus one because of the header row). This doesn't work for larger numbers of files, because the table uses paging. It also assumes you've hidden the new folder button, as I mentioned in my last post.
• The file input gives me an array of files I'm able to loop through to check things like file type. I could also get access to file size, file name and other files attributes here.

Of course, validating based on attributes available in JavaScript (especially things like file type, which are often based on file extensions, which can easily be manipulated) is not perfect. So I don't consider this the world's most secure validation. But generally it would be better than nothing at all, and does quite a bit to improve user experience.

Anyone else out there tried adding additional validation to the SharePoint integration with Dynamics 365 Portal?