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

Steps to restrict selected file types:

  1. Create a field with 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 Bridge’s 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.