Jump to content

Get filename of file selected for upload in datapage


Recommended Posts

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!

 

Link to comment
Share on other sites

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. 

JIcG7ES.png

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>

 

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