Require Specific File format On File Upload Field

[DavidKennett]

I am trying to only allow specific file type upload using JS 

<SCRIPT LANGUAGE="JavaScript">
document.getElementById("Files").setAttribute("accept","application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
</SCRIPT>

Where 'Files' is the table field name. But it still allows me to upload a PNG file. Am i doing something wrong?

[Vitalikssssss]

Hi DavidKennett,

I have used following JS in my Tablular Report Datapage (inline insert enabled) which hides/disables the "Add" button if uploaded file has any other extension except the following: .pdf, .doc, .docx, .xls, .xlsx.

<SCRIPT LANGUAGE="JavaScript">

var v_file = document.getElementById('InlineAddPhoto');
var v_btn = document.getElementById('Mod0InlineAdd');

v_file.addEventListener('change', function(v_e){
 var v_ext = (v_file.value || '').split('.').pop().toLowerCase();
 if (!['pdf', 'doc', 'docx','xls','xlsx'].contains(v_ext)){
 v_btn.disabled;
 alert('Please attach a document with following extension: .pdf, .doc, .docx, .xls, .xlsx'); // pop-up alert message 
 v_btn.style.display="none";}

 else {v_btn.style.display="inline-block";}
});
</SCRIPT>

Please paste this snippet of code into the Footer.

Hope this helps.

 

Regards,

vitalikssssss

 

[DavidKennett]

thank you for that, really useful.

[GoodBoy]

Hello everyone!

Just to share, there is an online article related to this: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/restrict-file-types-that-can-be-uploaded-in-a-datapage/

[NailDyanC]

Hi, just to update this post. Caspio has a new article about restricting file uploads: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/restrict-file-types-that-can-be-uploaded-in-a-datapage/

[Kurumi]

Hi - Just wanted to share this solution. If you want to restrict file type in multiple fields, just like in this article: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/restrict-file-types-that-can-be-uploaded-in-a-datapage/

You can use this code:

<script type="text/javascript">

var files = Array.from(document.querySelectorAll('#InsertRecordFIELDNAME1, #InsertRecordFIELDNAME2, #InsertRecordFIELDNAME3, #InsertRecordFIELDNAME4, #InsertRecordFIELDNAME5'));

var extensions = ['pdf'];

files.forEach(function(el) {
el.addEventListener('change', function(e) {

var ext = this.value.match(/.([^.]+)$/)[1];

if (!extensions.includes(ext)){

alert('Invalid file format. Please upload PDF only.');

this.value = '';

}
});});

</script>

Hope it helps!