Drag and drop file uploader

[EvSam]

Hello Caspio Universe! I was wondering if anyone out there had come across a way to incorporate drag-and-drop file upload instead of the standard file picker.  I've been researching this out there for some solutions so I figured I'd see if anyone else has encountered any script and css that works well in caspio. Any advice would be appreciated! 

thanks so much

[kpcollier]

@EvSamFwiw, you can already drag a file over to the standard file upload picker/element. Even though it has a button that says 'Choose File', you can still drag a file over to the box and it should work. 

[EvSam]

wow you are so right! just tested. Very very cool. I wonder if I can play with the fileupload element to create a "box" for folks to drag and drop a file into instead of displaying the file picker. Thanks so much for your advice!

[kpcollier]

15 hours ago, EvSam said:

I wonder if I can play with the fileupload element to create a "box" for folks to drag and drop a file into instead of displaying the file picker.

I'm not too sure how to change the text in the 'Choose File' button. But, you can definitely change the way the element looks. 

<style>
  
#InsertRecordFIELDNAME {
  height: 200px;
  border: 1px dashed;
}
  
</style>

 

[KlisaN137]

Hi@kpcollier

 I'm not sure we can easily change the text in 'Choose File' button. I've looked at the following places:

https://docs.microsoft.com/en-us/answers/questions/567773/change-34choose-file34-and-34no-file-chosen34-text.html
https://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file

But, it seems that Caspio use slightly different code for a input file element, you can maybe try temper with it yourself...

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