Restricting File Types That Can Be Uploaded in a DataPage

There are applications, for instance, user registration, job application or contact management apps, that require uploading a file in order to complete the submission. To avoid receiving unnecessary file types, you can restrict uploading only to the file types that are needed.  

This article will guide you on how to restrict the uploading of selected file types through DataPages based on their file name extensions such as GIF, PDF, JPEG, etc.   

Steps:

1. Create a field with the File data type or make sure a File field already exists in the table you want to use.
2. Edit your Submission Form DataPage which contains the File field.
3. Add a Header and Footer in the Configure Fields screen of the DataPage wizard.
4. Disable the HTML Editor in the Footer section.
5. Copy and paste the following JavaScript in the Footer section.

   <script type="text/javascript">
   var file = document.getElementById('InsertRecordFIELDNAME');
   var extensions = ['jpg','jpeg','png'];
   file.addEventListener('change', function(e) {
   var ext = this.value.match(/.([^.]+)$/)[1];
   console.log(ext);
   if (!extensions.includes(ext)){
   alert('Invalid file format. Please try to upload the correct file format.');
   this.value = '';
   }
   });
   </script>

6. Replace the FIELDNAME in the JavaScript code with the File field name in your Table. For example, if the name of the file field is Profile_Picture, then it should be InsertRecordProfile_Picture.
7. Add or remove file extension in the extensions array in the JavaScript code to add or remove support of additional file extensions.
8. Change the alert error message to your desired message in the JavaScript code.
9. Save the DataPage.

Note: You can apply the JavaScript in the update form by following the steps above and changing InsertRecord to EditRecord in the JavaScript code.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.

For assistance with further customization based on your specific application requirements, please contact our Professional Services team.