function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Stefano AmentaStefano Amenta 

Disable upload button in VF page

hi,
I have a page where the user is required to upload 2 attachments.

What's the best approach to disable the Upload button if the user didn't load 2 attachments?

Thanks.

User-added image
  
<apex:page controller="UploadFilesController">
    <apex:sectionHeader title="Upload Work Permit"/>    
    <apex:form enctype="multipart/form-data" id="form">
    <apex:pageBlock title="Document">
        <apex:pageMessages ></apex:pageMessages>
        <apex:pageBlockButtons >
            <apex:commandButton action="{!insertAttachmnet}" value="Upload"/>
            <input type="button" class="btn" value="Cancel" onclick="window.location='/{!CurrentVisaId}'" />
        </apex:pageBlockButtons>
        <apex:pageBlockSection showHeader="false" columns="1" id="block1">
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Document" for="file1"/>
                <apex:inputFile value="{!Attachment1.body}" filename="{!Attachment1.name}" id="file1"/>                
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem >
                <apex:outputLabel value="Document" for="file2"/>
                <apex:inputFile value="{!Attachment2.body}" filename="{!Attachment2.name}" id="file2"/>                
            </apex:pageBlockSectionItem>           
        </apex:pageBlockSection>
    </apex:pageBlock>    
    <script>
        if({!IsCompleted})
        {
            window.location='/{!CurrentVisaId}';
        }        
    </script>
  </apex:form>
</apex:page>

 
SandhyaSandhya (Salesforce Developers) 
Hi,
Below is the sample code , try to change according to your requirements.
  
<apex:page controller="FormValidate">
    <style type="text/css">
    .redFont{
        font-style: bold;
        color: red;
    }
    </style>
    <apex:form id="myForm" >
            <apex:pageBlock id="thPageBlock" >
                <apex:pageMessages/>
                 <apex:pageBlockButtons  >
                    <apex:commandButton value="Send" action="{!processForm}" onclick="return validateForm();"/>
                 </apex:pageBlockButtons>
                <apex:pageBlockSection title="Form Data" columns="1" id="thePageBlockSection">                
                    <apex:inputText label="Name" value="{!name}"/>
                    <apex:inputText label="Comment" value="{!myComment}"/>              
                    <apex:inputFile value="{!attach.body}" fileName="{!attach.name}" id="fName"/><apex:outputLabel styleClass="redFont" id="errMsg"></apex:outputLabel>
                </apex:pageBlockSection>         
            </apex:pageBlock>
            <script type="text/javascript">
                function validateForm() {
                    try {
                        var fNameObj = document.getElementById("{!$Component.myForm.thPageBlock.thePageBlockSection.fName}");
                        var errObj = document.getElementById("{!$Component.myForm.thPageBlock.thePageBlockSection.errMsg}");
                        if (fNameObj.value.length == 0) {
                            errObj.innerHTML = "Please select a file before sending!!!"
                            return false;
                        }
                        return true;
                    } catch (e) {
                        alert(e);
                        return false;
                    }
                }           
            </script>
    </apex:form> 
</apex:page>
  
public with sharing class FormValidate {
    public String name{get; set;}
    public String myComment{get; set;}
    public String fileName{get; set;}
    public Attachment attach {get;set;}

    public FormValidate() {

    }
    public PageReference processForm() {    
        // here i process the data of my form 

        // and here i redirect to a new page
        PageReference newPage = new PageReference('/');  
        newPage.setRedirect(true);

        return newPage; 
    }
}

Refer below link.

https://salesforce.stackexchange.com/questions/89489/show-error-message-in-visualforce-page-if-no-file-was-uploaded-by-user​
 
Please mark it as solved if my reply was helpful, it will make it available
for others as a proper solution.

Best Regards,
​Sandhya
 
 
Stefano AmentaStefano Amenta
Hi Sandhya  

thanks for that. 

Actually, I already have an error message showing up (it's defined in my controller).

My request was more about disabling the Upload button if the user didn't select 2 files. For example, the button is unclickable if 2 files have not been chosen.

Do you think it's possible?