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.
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.
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.
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:
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:
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?
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!!
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.
Nick
Minor thing, Shouldn’t the code be inside $(document.ready)?
Yes, absolutely!
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’))
console.log(formData);
}