Jump to content

How to get the file size


Recommended Posts

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.

Link to comment
Share on other sites

  • 2 weeks later...

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

 

Link to comment
Share on other sites

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?;

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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>

Link to comment
Share on other sites

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.

jaHAKEm.png

 

Hope this helps

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 years later...

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>
Link to comment
Share on other sites

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'



 

Link to comment
Share on other sites

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.

 

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...
×
×
  • Create New...