Is there a way to restrict the file upload field to only take a .fdr, .txt, .pdf, pdf, .png, .mp4, mp3, .wavi file type document? Can this be achieved in javascript?

[Cherry]

Hi everyone, is there a to restrict the file upload field to only take the ff. file type of document? Can this be achieved in JavaScript/CSS? Need some help. Thank you

Asst Type:  Files Accepted:
Story:             .word, .fdr. .txt, .pdf
Visual Art:   .pdf, .png. (photo image)
Movie:           .mp4
Music:           .mp3, .wavi
Other (Request file type upload)

[sandy159]

Hi @Cherry,

I think this article can be helpful: 

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']; // you can add other file types here

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!