+ Start a Discussion
Stefano AmentaStefano Amenta 

Disable upload button in VF page

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?


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: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:outputLabel value="Document" for="file2"/>
                <apex:inputFile value="{!Attachment2.body}" filename="{!Attachment2.name}" id="file2"/>                

SandhyaSandhya (Salesforce Developers) 
Below is the sample code , try to change according to your requirements.
<apex:page controller="FormValidate">
    <style type="text/css">
        font-style: bold;
        color: red;
    <apex:form id="myForm" >
            <apex:pageBlock id="thPageBlock" >
                 <apex:pageBlockButtons  >
                    <apex:commandButton value="Send" action="{!processForm}" onclick="return validateForm();"/>
                <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>
            <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) {
                        return false;
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('/');  

        return newPage; 

Refer below link.

Please mark it as solved if my reply was helpful, it will make it available
for others as a proper solution.

Best Regards,
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?