0

How do I get get the filesize by id of the inputfile component into javascript. Currently I get the error checkIfEmpty is not defined.

Visualforce

                                    <apex:repeat value="{!newAttachments}" var="newAtt">
                                        <apex:variable var="rowNum" value="{!rowNum+1}"  />
                                        <apex:pageBlockSectionItem rendered="{!rowNum == 1}" >
                                            <apex:outputLabel value="CV *" rendered="{!rowNum == 1}" ></apex:outputLabel>
                                             <apex:inputFile id="inputfile-1"

                                                            value="{!newAtt.body}" filename="{!newAtt.name}"
                                                            onchange="checkFileSize(event,id)"/>
                                        </apex:pageBlockSectionItem>
                                        <apex:pageBlockSectionItem rendered="{!rowNum == 2}" >
                                            <apex:outputLabel value="Motivation *" rendered="{!rowNum == 2}" ></apex:outputLabel>
                                                <apex:inputFile id="inputfile-2"

                                                            value="{!newAtt.body}" filename="{!newAtt.name}"
                                                            onchange="checkFileSize(event,id)"/>
                                        </apex:pageBlockSectionItem>
                                        <apex:pageBlockSectionItem >
                                            <apex:outputLabel value=""></apex:outputLabel>

                                        </apex:pageBlockSectionItem>
                                    </apex:repeat>


 <Script>
 function checkIfEmpty(event,id){
         alert(document.getElementById('inputfile-1')files[0].size);
}
 </script> 
1

You can check event.target.files[0].size to determine the file's size:

function checkIfEmpty(event){
    alert(event.target.files[0].size);
}

Note that in Visualforce, id attributes are "mangled" to be universally unique within the page. This is why your document.getElementById call fails to find the element.

Also, the onchange handler should match the function name:

onchange="checkIfEmpty(event)"
| improve this answer | |
  • But in this case I am not checking both files right. I want to be able to check for inputfile-1 and inputfile-2 – Thomas Apr 8 at 15:54
  • @Thomas Your code checks each file as it is updated in the input field. If you wanted to check all of them, you'd do so on submit. Your code is also overly complicated. A simple wrapper class would be much easier to work with: public class AttachmentWrapper { String fileName { get; set; } Blob body { get; set; } String contentType { get; set; } Integer fileSize { get; set; } String label { get; set: } }, then create a list of AttachmentWrapper and iterate over that. – sfdcfox Apr 8 at 16:15
  • How can I check all of the on submit. My idea was to get the 2 ids on submit of the <apex:inputFile and check the sizes of the 2 <apex:inputFile – Thomas Apr 8 at 17:28
  • @Thomas You can query for the elements, but remember that the ID values will be mangled (I just said this). Use a class or other attribute to find the input field. – sfdcfox Apr 8 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.