Get filename of file selected for upload in datapage

[EvSam]

Hello caspio!

We have a file upload picker in our application and I'd like to capture the filename that is selected in the upload field within another virtual field. I was trying to do this as a calculated value but I cannot reference the file field in the field picker. There doesn't seem to be a way to get the filename after a file is selected. 

Has anyone been able to get the filename of a file selected in the file picker? I inspected the page elements after picking a file and could not see a way to access the name of the selected field with JavaScript either. I'm trying to get the filename in order to display it in another section of the datapage.

Any advice would be welcome!

 

[CoopperBackpack]

Hello @EvSam,

I modified the code from this forum post:   https://forums.caspio.com/topic/12061-how-to-get-the-file-size/

This should work for the Submission form. 

If you have a Submission form, paste this code to the Footer section. Do not forget to the disable the HTML editor before pasting the code. 

<script>
document.addEventListener('DataPageReady', fileInputEvent)

function fileInputEvent() {
 document.querySelector("#InsertRecordFile_2").addEventListener('change', fileInputHandler); // use the InsertRecord[your file field name] instead
 document.removeEventListener('DataPageReady', fileInputEvent)
}

function fileInputHandler(event) {
 const fileNameInput = document.querySelector('#cbParamVirtual1'); // replace the field name if needed
 fileNameInput.value = event.target.files[0].name;
}
</script>

 

[EvSam]

wow, thanks so much! Truly appreciate it. It's been great learning JS and building out our caspio platform - really appreciate the sample code and will give it a try!