JavaScript-TypeScript for Nintex Forms to Validate File Names
This article is going to discuss how to implement JavaScript-TypeScript for Nintex Forms to Validate File Names before they’re uploaded to SharePoint.
When I was a complete newbie to SharePoint and developing Nintex forms that included file attachments, I had all sorts of fun learning about the extra special characters SharePoint doesn’t like in file names in addition to those already restricted by Microsoft Windows opreating system.
Yet I see a lot of Nintex form solutions which do not consider nor address those limitations.
Microsoft has published the whole list of not allowed characters here: http://support.microsoft.com/kb/905231
The Nintex Forms issue
The Nintex Forms “Attachments” control does not have an option to prevent file attachments with invalid file names with out of the box functionality.
Obviously, the only right way before storing the file in the SharePoint library using custom Nintex solutions is to validate attachment names before uploading.
JavaScript-TypeScript to the rescue!
To prevent users of SharePoint Nintex forms from attaching files with invalid characters, here is JavaScript-TypeScript for Nintex Forms to Validate File Names before uploading to SharePoint that you can use:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
//------------------------------------------------------------------------ //JavaScript Version: //------------------------------------------------------------------------ //You may need to include these reference paths (or similar depending on how your server is set up) : /// <reference path="../../Scripts/typings/jquery/jquery.d.ts"/> /// <reference path="../../Scripts/typings/sharepoint/SharePoint.d.ts"/> /// <reference path="../../Scripts/typings/camljs/index.d.ts"/> //Check file names are valid NWF$('.nf-attachmentsRow').on('change', '.nf-attachmentFileInput', validateAttachmentNames); function validateAttachmentNames(eventObject) { var textbox$ = NWF$(this); var attachrowid = this.id.substring(10, 47); var fileUploadid = attachrowid; var index = attachrowid.substring(36); //console.log('index:' + index); //console.log('attachrowid:' + attachrowid); //console.log('fileUploadid:' + fileUploadid); if (index == '') { attachrowid += '0'; } var fileName = NWF.FormFiller.Attachments.TrimWhiteSpaces(textbox$.val().replace(/^.*[\\\/]/, '')); var match = (new RegExp('[~#%\&{}+\|]|\\.\\.|^\\.|\\.$')).test(fileName); if (match) { isValid = false; setTimeout(function () { NWF$("tr[id^='attachRow']").each(function () { var arrParts = (NWF$(this).find(".ms-addnew")[0]).href.split('"'); var fileName = arrParts[5]; var attachRow = arrParts[1]; var fileUpload = arrParts[3]; var match = (new RegExp('[~#%\&{}+\|]|\\.\\.|^\\.|\\.$')).test(fileName); if (match) { console.log(fileName); NWF.FormFiller.Attachments.RemoveLocal(attachRow, fileUpload, fileName); alert('Invalid file: ' + fileName + ' You cannot attach files with the following characters ~ # % & * { } \ : < > ? / + | \n\nThe file has been removed.'); } }); }, 500); } } //------------------------------------------------------------------------ //TypeScript Version //------------------------------------------------------------------------ //You may need to include these reference paths (or similar depending on how your server is set up) : /// <reference path="../../Scripts/typings/jquery/jquery.d.ts"/> /// <reference path="../../Scripts/typings/sharepoint/SharePoint.d.ts"/> /// <reference path="../../Scripts/typings/camljs/index.d.ts"/> //Check file names are valid NWF$('.nf-attachmentsRow').on('change', '.nf-attachmentFileInput', validateAttachmentNames); export function validateAttachmentNames(eventObject: JQueryEventObject) { var textbox$ = NWF$(this); var attachrowid = this.id.substring(10, 47); var fileUploadid = attachrowid; var index = attachrowid.substring(36); //console.log('index:' + index); //console.log('attachrowid:' + attachrowid); //console.log('fileUploadid:' + fileUploadid); if (index == '') { attachrowid += '0'; } var fileName = NWF.FormFiller.Attachments.TrimWhiteSpaces(textbox$.val().replace(/^.*[\\\/]/, '')); var match = (new RegExp('[~#%\&{}+\|]|\\.\\.|^\\.|\\.$')).test(fileName); if (match) { isValid = false; setTimeout(function () { NWF$("tr[id^='attachRow']").each(function () { var arrParts = (<HTMLLinkElement>(NWF$(this).find(".ms-addnew")[0])).href.split('"'); var fileName = arrParts[5]; var attachRow = arrParts[1]; var fileUpload = arrParts[3]; var match = (new RegExp('[~#%\&{}+\|]|\\.\\.|^\\.|\\.$')).test(fileName); if (match) { console.log(fileName); NWF.FormFiller.Attachments.RemoveLocal(attachRow, fileUpload, fileName); alert('Invalid file: ' + fileName + ' You cannot attach files with the following characters ~ # % & * { } \ : < > ? / + | \n\nThe file has been removed.'); } }); }, 500); } } |
How to implement in your own Nintex Forms solution
In a nutshell:
- Create or Edit a custom JavaScript file for your Nintex form.
- Include the above JavaScript code.
- Open your Nintex Form in the form designer.
- Click the “Settings” button in the “Nintex Forms” tab’s main toolbar.
- Expand the “Advanced” section in the pop-up window that appears.
- Under “Custom JavaScript Includes”, put in the URL to reference your JavaScript file.
- Fine-tune and ‘tweak’ the script file for any references you may need to include, or the reference paths provided, for your particular server’s setup.
Viola!
Now whenever someone tries to attach a file to a Nintex form to upload into SharePoint:
- they’ll receive a nice error message informing them their file with its current name isn’t allowed.
- the attachment will be automatically removed from the Nintex Attachments control
So much more user friendly!
