Jump to content

Drag and drop file uploader


Recommended Posts

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

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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!

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.

Guest
Reply to this topic...

×   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.

Loading...
 Share

×
×
  • Create New...