Drag and Drop field for file upload

[bbewley]

I would like to add a drag and drop upload feature.   Drag from desktop to field in data page.  Has anyone else found a good solutions for this?

[kpcollier]

The attachment tab already has this feature. If there is an attachment box on your form, you can drag a file to it instead of clicking browse.

Maybe mess with the css of the field to make it bigger to let users know of the feature.

[bbewley]

I'm not sure what you are referring to.  What attachment tab?  When I have an upload file field, it simply shows a "Choose File" button.

[kpcollier]

It is easier to see if you set a border around it. If you drag a file to anywhere inside the rectangle border it will accept the file.

Have you tried to simply drag a file towards the 'Choose File' button?

[bbewley]

Got it.  Thank you!

[kpcollier]

Np 

[bbewley]

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?

[kpcollier]

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.

[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>