Check for the type of the file uploaded

Check for the type of the file uploaded

Requirement

Only allow the file upload field to accept file types PDF, XLS, or XLXS. Display an alert message when any other file type is detected.

Use case

A restaurant app contains a form to store supplier receipts as files. When an admin uploads a receipt which is not a PDF, XLS, or XLXS file, an alert will be displayed and form submission will be restricted.
 

Steps to follow

1. Create a form with the following details.
Form
Form Link Name
Field Type
Field Link Name
Field Name
Upload Invoice
Upload_Invoice
File Upload
Invoice
Invoice
 
2. Create workflow with the following details.

The workflow is to be triggered when the admin uploads an invoice in the Upload Invoice form, so we are selecting the Form Event as "User input of a field".
 
3. Save the following Deluge script in the Deluge editor:
  1. //Assign the list of allowed extensions to allowed_list
  2. // Include/exclude required extensions to/from this list
  3. allowed_list = {"pdf","xls","xlsx"};
  4. // Perform validation only if the input field isn't empty
  5. if(input.Invoice != "")
  6. {
  7. // Find the extension of the uploaded input file
  8. ext = input.Invoice.toList(".").get(input.Invoice.toList(".").size() - 1);
  9. // Display an alert message if the extension of the uploaded file doesn't match with any of the values of the allowed_list.
  10. if(!allowed_list.contains(ext))
  11. {
  12.   alert "This file type is not accepted";
  13. }
  14. }
4. Create a workflow with the following details.

To restrict the form from being submitted if invalid values are entered on the form, the same validation needs to be performed before submission. So, we are selecting the Form Event as "Validations on form submission".
 
5. Repeat the validation from step 3 and restricts the form from being submitted if a file with invalid type is uploaded.
allowed_list = {"pdf","xls","xlsx"};
  1. if(input.Invoice != "")
  2. {
  3. ext = input.Invoice.toList(".").get(input.Invoice.toList(".").size() - 1);
  4. if(!allowed_list.contains(ext))
  5. {
  6.   alert "This file type is not accepted";
  7.  
  8. // Restricts the form from being submitted
  9.   cancel submit;
  10. }
  11. }

See how it works

Points to note

  • This tutorial demonstrates the use case with a File Upload field type. The same snippet would also work for the Audio and Video field types.
  • Unlike the other file type fields, applying the input keyword on an Image field doesn’t directly return the file name.
  1. info Input.Image;
Returns the file path in the following HTML format:
<img src = " https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1624276872234_SamplePNGImage_100kbmb.png" lowqual = " https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1624276872234_710" medqual = " https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1624276872234_710" downqual = " https://creatorexport.zoho.com/sharedBy/appLinkName/viewLinkName/fieldName/image/1624276872234_SamplePNGImage_100kbmb.png" border = "0"></img>
To fetch the file extension from the returned value, use the following snippet:
  1. src = input.Image.executeXPath("/img/@src").executeXpath("/src/text()");
  2. //Fetches the value stored against the src attribute
  3. ext = src.toList(".").get(src.toList(".").size() - 1);
  4. // Fetches the extension of the file from the file path