The <apex: inputFile> is one of the most important components for creating an input field to upload a file. The <apex: inputFile> component plays an important role when we need to work with the file on Visualforce Page.
We can upload a file of a maximum size of 10 MB via Visualforce. The <apex: inputFile> has the following attributes:
1. accept
The "accept" is a string type attribute, i.e., a comma-delimited set of content types used by the browser to limit the set of file options made available for selection.
Syntax
<apex:inputFile accept="doc, txt"></apex:inputFile >
2. accesskey
The acesskey is a string type attribute that defines the keyboard access key that puts the field in focus.
Syntax
<apex:inputFile accesskey="f"></apex:inputFile>
3. alt
The alt is a string-type attribute that defines the field's alternative text description.
Syntax
<apex:inputFile alt="Alternative Text Here"></apex:inputFile>
4. contentType
The contentType is a string type attribute used to store the type of the uploaded file's content.
Syntax
<apex:inputFile contentType="{!variableName }"></apex:inputFile>
5. dir
The dir is a string-type attribute used to specify the direction in which the generated HTML component should be used. RTL and LTR are the two possible values for the dir attribute.
Syntax
<apex:inputFile dir="RTL"></apex:inputFile>
6. disabled
The disabled is a Boolean type attribute that specifies whether this text box should be displayed in the disabled state or not. By default, its value is set to false.
Syntax
<apex:inputFile disabled="true"></apex:inputFile>
7. fileName
The fileName is a string-type attribute used to store the uploaded file's name.
Syntax
<apex:inputFile fileName="{!variableName }"></apex:inputFile>
8. fileSize
The fileSize is an Integer type attribute that is used for storing the size of the uploaded file.
AD
Syntax
<apex:inputFile contentType="{!variableName }"></apex:inputFile>
9. id
The id is a string type attribute, i.e., a unique identifier that allows this component to be referenced by other components in the page.
Syntax
<apex:inputFile id="inputId"></apex:inputFile>
10. lang
The lang is a string-type attribute used for specifying the base language used for the generated HTML output. The possible values of this attribute are en and en-US.
Syntax
AD
<apex:inputFile lang="en"></apex:inputFile>
11. onblur
The onblur is a string-type attribute used to invoke the JavaScript method when the onblur event occurs or when the focus moves off the field.
Syntax:
<apex:inputFile onblur="saveRecords();"></apex:inputFile>
12. onchange
The onchange is a string-type attribute used to invoke the JavaScript method when the onchange event occurs or when the user changes the field's content.
Syntax:
<apex:inputFile onchange="saveRecords();"></apex:inputFile>
13. onclick
The onclick is a string-type attribute used to invoke the JavaScript method when the onclick event occurs or when the user clicks the field.
Syntax:
<apex:inputFile onclick="saveRecords();"></apex:inputFile>
14. ondblclick
The ondblclick is a string-type attribute used to invoke the JavaScript method when the ondblclick event occurs or when the user clicks the field twice.
Syntax:
<apex:inputFile ondblclick="saveRecords();"></apex:inputFile>
15. onfocus
The onfocus is a string-type attribute used to invoke the JavaScript method when the onfocus event occurs or the focus is on the field.
Syntax:
<apex:inputFile onfocus="saveRecords();"></apex:inputFile>
16. onkeydown
The onkeydown is a string-type attribute used to invoke the JavaScript method when the onkeydown event occurs or when the user presses a keyboard key.
Syntax:
<apex:inputFile onkeydown="saveRecords();"></apex:inputFile>
17. onkeypress
The onkeypress is a string-type attribute used to invoke the JavaScript method when the onkeypress event occurs or when the user holds down or presses a keyboard key.
Syntax:
<apex:inputFile onkeypress="saveRecords();"></apex:inputFile>
18. onkeyup
The onkeyup is a string-type attribute used to invoke the JavaScript method when the onkeyup event occurs or when the user releases a keyboard key.
Syntax:
<apex:inputFile onkeyup="saveRecords();"></apex:inputFile>
19. onmousedown
The onmousedown is a string-type attribute used to invoke the JavaScript method when the onmousedown event occurs or when the user presses the mouse button.
Syntax:
<apex:inputFile onmousedown="countKeys();"></apex:inputFile>
20. onmousemove
The onmousemove is a string-type attribute used to invoke the JavaScript method when the onmousemove event occurs or when the user moves the mouse pointer.
Syntax:
<apex:inputFile onmousemove="countKeys();"></apex:inputFile>
21. onmouseout
The onmouseout is a string-type attribute used to invoke the JavaScript method when the onmouseout event occurs or when the user moves the mouse pointer away from the field.
Syntax:
<apex:inputFile onmouseout="countKeys();"></apex:inputFile>
22. onmouseove
The onmouseover is a string-type attribute used to invoke the JavaScript method when the onmouseover event occurs or when the user moves the pointer over the input.
Syntax:
<apex:inputFile onmouseover="countKeys();"></apex:inputFile>
23. rendered
The rendered is a Boolean type attribute that specifies whether this component needs to be rendered on the page or not. By
Syntax:
<apex:inputFile rendered="countKeys();"></apex:inputFile>
24. required
The required is a Boolean type attribute that specifies whether this field is a required field or not. By default, its value is set to false.
Syntax:
<apex:inputFile required="true"></apex:inputFile>
25. size
The size is an Integer type attribute used to specify the size of the selected box. Size is expressed by the number of characters displayed at a time.
Syntax:
<apex:inputFile size="50"></apex:inputFile>
26. style
The style is a string type attribute used to specify the inline CSS style that will be applied for displaying the input component.
Syntax:
<apex:inputFile style="display:none;"></apex:inputFile>
27. styleClass
The styleClass is a string type attribute used to specify the style class that will be applied for displaying the input component.
Syntax:
<apex:inputFile styleClass="inputClass"></apex:inputFile>
28. tabindex
The tabindex is a string type attribute used to specify the order in which this field is selected compared to other page components when a user presses the Tab key repeatedly. The value of this attribute should be between 0 to 32767.
Syntax:
<apex:inputFile tabindex="1024"></apex:inputFile>
29. title
The title is a string-type attribute that specifies the text to display as a tooltip when the user's mouse pointer hovers over this component.
Syntax:
<apex:inputFile title="File Title"></apex:inputFile>
30. value
The value is a merge field that references the controller class variable associated with this component.
Syntax:
<apex:inputFile value="{!myInputFile}"></apex:inputFile>
Let's take an example to understand how we can use the <apex: inputFile> component:
ApexInputFileExample.vfp
<!-- create apex page with custom controller-->
<apex:page standardController="Contact" extensions="ApexInputController" docType="html-5.0">
<!-- use apex form to show the accounts and contacts table-->
<apex:form id="changeStatusForm">
<apex:pageBlock title="Account/Contact Information">
<!-- command buttons are responsible for showing accounts in the table-->
<apex:pageMessages />
<apex:pageBlockSection title="Account Information">
<apex:inputText value="{!accName}" label="Account Name"/>
<apex:inputText value="{!accAccountNumber}" label="Account Number"/>
<apex:inputText value="{!accPhone}" label="Phone"/>
<apex:inputText value="{!accRating}" label="Rating"/>
<apex:inputText value="{!accWebsite}" label="Website"/>
</apex:pageBlockSection>
<apex:pageBlockSection title="Contact Information">
<apex:inputText value="{!conFirstName}" label="First Name"/>
<apex:inputText value="{!conLastName}" label="Last Name"/>
<apex:inputText value="{!conAccountId}" label="Account Id"/>
<apex:inputText value="{!conEmail}" label="Email"/>
<apex:inputText value="{!conPhone}" label="Phone"/>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
DocumentController.apxc
// create apex class DocumentController for handling selected document
public class DocumentController {
// default constructor
public DocumentController(ApexPages.StandardController controller) {
Document d = (Document) controller.getRecord();
d.folderid = UserInfo.getUserId();
}
}
