How to get the file size

[CoopperBackpack]

Hello,

I have created a Submission form that has a field to upload files.

Is it possible to get the file size and to submit this value to the table?

Any help would be greatly appreciated. 

 

[Hastur]

Hello @CoopperBackpack

You may use additional JS code to implement this workflow:

<script type="text/javascript">
document.addEventListener('DataPageReady', fileInputEvent)

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

function fileInputHandler(event) {
 const fileSizeInput = document.querySelector('#InsertRecordFile_size'); // use the InsertRecord[your file size field name] instead
 fileSizeInput.value = event.target.files[0].size;
}
</script>

Insert this code into the header of the submission form. Do not forget to disable the HTML editor.

For the file size field use the Number data type. You also may make the size field hidden in the submission form.

[jrifkin]

What if you wanted to get the file size for multiple files and store those in separate fields. IE File1--> Filesize1 and File2--> Filesize2

[Vitalikssssss]

Hi @jrifkin,

It is possible but you need to follow certain naming convention:

1. Files fields you need to name them as:  File_1, FIle_2, File_3 ...

2. File size fields should be named as: File_1_size, File_2_size, File_3_size ...

Here is a slightly modified JavaScript provided by @Hastur:

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

function fileInputEvent() {

 const fileFields = ['File_1', 'File_2']; //add more file fields if needed
 

 fileFields.forEach(el=>{
   document.querySelector(`#InsertRecord${el}`).addEventListener('change', fileInputHandler);
 });

 document.removeEventListener('DataPageReady', fileInputEvent)
}

function fileInputHandler(event) {

 
 const fileSizeInput = document.querySelector(`#${event.target.name}_size`); 
 fileSizeInput.value = event.target.files[0].size;
}

</script>

You may change InsertRecord prefix to EditRecord in order to use this JavaScript in Details/Update Datapages.

Hope this helps.

Regards,

vitalikssssss

 

[jrifkin]

You are absolutely awesome! This is my first time using the community forum and I am so appreciative for the help! You all are so awesome! One last question, if I wanted to also get the file extension stored in a cell, like .txt or .pdf how would I do that? 

 

 

would I do:

 

const fileSizeInput = document.querySelector(`#${event.target.name}_size`);

fileSizeInput.value = event.target.files[0].size;

--and add below--

const fileExtensionInput = document.querySelector(`#${event.target.name}_extension`);

fileExtensionInput.value = event.target.files[0].extension (or whatever the appr. termonology is?;

[jrifkin]

@Vitalikssssss 

 

I got you code to work! Thank you. I am now just curious about also getting the extension

[Vitalikssssss]

Hi @jrifkin,

Glad that heard that solution has helped.

Here is updated version which would also capture the file extension.

Please note that you should use the following naming convention for your fields which would store extension: File_1_ext  File_2_ext  File_3_ext etc
 

<script type="text/javascript">
document.addEventListener('DataPageReady', fileInputEvent)

function fileInputEvent() {

 const fileFields = ['File_1', 'File_2'];
 

 fileFields.forEach(el=>{
   document.querySelector(`#InsertRecord${el}`).addEventListener('change', fileInputHandler);
 });

 document.removeEventListener('DataPageReady', fileInputEvent)
}

function fileInputHandler(event) {

 //Store file size

 const fileSizeInput = document.querySelector(`#${event.target.name}_size`); 
 fileSizeInput.value = event.target.files[0].size;
 
//Store file extension

const fileSizeExt = document.querySelector(`#${event.target.name}_ext`); 
 fileSizeInput.value = event.target.files[0].name.split('.').pop();
 

}

</script>

Regards,

vitalikssssss

[JustTrying]

Hello I know this old but I'm trying to implement this code for myself. Any chance anyone can see what I'm doing wrong here?

Thank you

<script type="text/javascript">
document.addEventListener('DataPageReady', fileInputEvent)

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

function fileInputHandler(event) {
 const fileSizeInput = document.querySelector("InsertRecordsize"); // use the InsertRecord[your file size field name] instead
 fileSizeInput.value = event.target.files[0].size;
}
</script>

[CoopperBackpack]

Hello @JustTrying,

I see that the # sign is missed when you select the inputs.

The correct syntax is document.querySelector("#InsertRecordattachment") and not document.querySelector("InsertRecordattachment").

Please test this code:

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

function fileInputEvent() {
 document.querySelector('#InsertRecordattachment').addEventListener('change', fileInputHandler); 
 document.removeEventListener('DataPageReady', fileInputEvent);
}

function fileInputHandler(event) {
 const fileSizeInput = document.querySelector('#InsertRecordsize'); 
 console.log(fileSizeInput);
 fileSizeInput.value = event.target.files[0].size;
}
</script>

If this is a Submission form and field names are correct, the code should work.

 

Hope this helps

[JustTrying]

@CoopperBackpack,

Thank you for the reply! This worked now. Thank you

So I learn for the future, the "#" sign is needed for inputting the field names?

[kpcollier]

1 hour ago, JustTrying said:

the "#" sign is needed for inputting the field names?

The '#' sign specifies ID of an element. 

Your elements on your form have ID's and Classes. If you look at the form in DevTools, you'll be able to see an ID and Class for almost every element. These are used to select the element for various reasons, such as CSS Rules or in your case, selecting a specific element to manipulate in JavaScript. 

If you were to select a class, you would put a ' . ' (period) in front of the class name, like .cbFormTextField

[ChrisCarlson]

Hello,

How can I modify this code to work for Inline Edit? I have the same code in an HTML block for Inline Add based on instructions above and that worked. 

<script type="text/javascript">
document.addEventListener('DataPageReady', fileInputEvent)

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

function fileInputHandler(event) {
 const fileSizeInput = document.querySelector('#InsertRecordFile_size'); // use the InsertRecord[your file size field name] instead
 fileSizeInput.value = event.target.files[0].size;
}
</script>

[Volomeister]

Hi @ChrisCarlson

This version accounts for inline add, inline edit, and details page edit options:
 

<script>
if (document.DataPageReadyHandler == undefined) {

const fileInputName = 'File_File'
const fileSizeInputName = 'File_Size'


const addFileInputListener = () => {
document.querySelector('body').addEventListener('change', e=>{

if(e.target.getAttribute == null) {return}
if(e.target.getAttribute('id') == null) {return}
if(e.target.getAttribute('id').indexOf(fileInputName) == -1) {return}
let id = e.target.getAttribute('id')
let files = e.target.files[0]
let size

if (files==undefined) {
size=0
}
else {
size=files.size
}

if (id.indexOf('InlineEdit')>-1) {
document.querySelector(`[id*="InlineEdit${fileSizeInputName}"]`).value = size
}
else if (id.indexOf('InlineAdd')>-1) {
document.querySelector(`[id*="InlineAdd${fileSizeInputName}"]`).value = size
}
else if (id.indexOf('EditRecord')>-1) {
document.querySelector(`[id*="EditRecord${fileSizeInputName}"]`).value = size
}

})
}



const DataPageReadyHandler = (e) => {
 if (e.detail.appKey != '[@cbAppKey]') { return }
addFileInputListener()

}

document.addEventListener('DataPageReady', DataPageReadyHandler)
document.DataPageReadyHandler = 'Enabled'
}

</script>

You need to update these lines with respective input names:

 

const fileInputName = 'File_File'
const fileSizeInputName = 'File_Size'

 

[ChrisCarlson]

Volomeister,

Thanks, this works great. I tested in both inline add and inline edit and it works good. I initially put it in an HTML block on the record row. It worked there except for when table is empty and when adding the first row. I moved it to the footer and it resolved that.

 

[chumkirebzi]

Hi Everyone!

Just sharing this link which references Caspio Event Handlers which include the DataPageReady function with more information: 

https://howto.caspio.com/datapages/ajax-loading/#:~:text=on this page.-,Caspio Event Handlers,-Caspio provides built

Good luck!