ecLearn - Learning Management System built on top of Microsoft Dataverse for Power Platform and Dynamics 365 users


Dynamics 365 Portal & SharePoint: Additional Validation on Uploaded Files

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

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.');

	// 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).');
			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?

11 responses to “Dynamics 365 Portal & SharePoint: Additional Validation on Uploaded Files”

  1. Sam says:

    Where should I add the javascript code?
    I’m adding this JS code to Entity Form and I my SharePoint document location is a subgrid.
    Custom code is not working in the subgrid!!

    • Nicholas Hayduk says:

      Hi Sam,

      To confirm, is the SharePoint grid on the entity form itself, or does it appear on another entity form that shows up when you open another record from a subgrid.

      The JavaScript should be placed in the Custom JavaScript of the Entity Form that has the SharePoint grid on it.


  2. Neha says:

    Minor thing, Shouldn’t the code be inside $(document.ready)?

  3. Victoria Donovan says:

    Morning Nicholas
    Thank you for great article. Is there a way I can change filename in the formdata to something more descriptive before submitting the form.? How can I get the formdata ? I have tried to hook into the add files button click event using the following code but there seems to be no form associated with the modal to get the formdata.
    $(‘.modal-add-file button’).click(function() {
    var formData = new FormData(document.getElementById(‘liquid_form’))

  4. Paul Rignanese says:

    Hi Nicholas,

    Do you have any blogs that detail how to prompt for additional metadata such as Type of Document, I’d like to also display this metadata on the list view of files as well.

  5. paul mathasaran says:

    Hi Nicholas,
    Thank you for that.
    Quick question: How can I limit the file type for PDF and word document file .docx


  6. paul says:

    Hi Nicholas,
    Thank you for that.
    Quick question: how can I restrict the file upload as pe file size?
    for example file is lager then 5 MB.


    • Nicholas Hayduk says:

      Instead of checking type, check the size. So something like (I haven’t tested this):

      $.each(self[0].files, function(i, e) {

      if (e.size > (5 * 1024 * 1024)) {
      alert(‘Your file should be no larger than 5MB.’);
      return false;

Leave a Reply

Your email address will not be published. Required fields are marked *


Engineered Code is a web application development firm and Microsoft Partner specializing in web portals backed by Dynamics 365 & Power Platform. Led by a professional engineer, our team of technology experts are based in Regina, Saskatchewan, Canada.