Jump to content
  • 0

Drag and Drop field for file upload



8 answers to this question

Recommended Posts

  • 0

I tried doing a border around it by using HTML blocks on either side and by editing the CSS.  Failed on both attempts.  The HTML block applies borders to internal table embedded in the file submission forms..so excess table cell borders.  With CSS, I used inspector to identify the correct name, and added a border-style there.  Nothing happening.  Any pointers?

Link to comment
Share on other sites

  • 0

You'll actually do this through the Styles tab on your Caspio Bridge. Go to the Style your page is using > Form/Details > Fields. Scroll down the list to find File. You'll see Border Options. I used a solid 1px with a light color and it works pretty well.

You'll probably want to do it under Results Page > Fields > File as well.

Link to comment
Share on other sites

  • 0

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 = '';




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...