Require Pdf File On File Upload Field

[Carlson]

Is there a way to require the file upload field to only take a PDF file type document? Can this be achieved in javascript?

[Jan]

Hello ccarls3,

 

I hope, the following code can help:

<SCRIPT LANGUAGE="JavaScript">
document.getElementById("InsertRecordfilename").setAttribute("accept","application/pdf");
</SCRIPT>

Please, insert the name of your field instead of filename

 

Please add the Header&Footer element, select the Footer element, click the Source button and enter the code.

[Carlson]

Thanks, it works great!

[Carlson]

Jan , how would i modify this script to allow all image types file extensions, and exclude all others (zip folder attachments, word docs, excel etc)?

[Jan]

Hi Christopher,

 

You can use "image/*" instead of "application/pdf", for example:

<SCRIPT LANGUAGE="JavaScript">
document.getElementById("InsertRecordfilename").setAttribute("accept","image/*");
</SCRIPT>

You can find more details about the accept attribute: http://www.w3schools.com/tags/att_input_accept.asp

[Carlson]

Jan, I have used this script which displays images or PDF by default, however the user can still change file type in attachment dialog and upload a different file type. Is there a way to display javascript warning if user attaches any file other than jpg or jpeg? Also, is there a way to require jpeg without user changing extension type on attachment dialog?

[Meekeee]

Hi! Just an update, you may check this article to restrict upload of file type: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/restrict-file-types-that-can-be-uploaded-in-a-datapage/

[Meekeee]

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!