Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a file upload button with HTML?
To create a file upload button with HTML, we use the <input> element with type="file". This creates a button that allows users to select and upload files from their device to a web server.
Syntax
Following is the basic syntax for creating a file upload button −
<input type="file" name="filename" id="fileInput">
The type="file" attribute transforms a regular input element into a file selection button. The name attribute identifies the file data when submitted to the server.
Basic File Upload Button
The simplest file upload implementation requires just the input element within a form. The browser automatically provides a "Choose File" or "Browse" button depending on the operating system and browser.
Example
<!DOCTYPE html>
<html>
<head>
<title>File Upload Button Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>File Upload Button Example</h1>
<p>Click on the "Choose File" button to upload a file:</p>
<form>
<input type="file" id="FILE" name="filename">
</form>
</body>
</html>
The output displays a file upload button that opens the file browser when clicked −
File Upload Button Example Click on the "Choose File" button to upload a file: [Choose File] No file chosen
File Upload with Multiple Attributes
The file input element supports several attributes to control file selection behavior, including accept for file type filtering, multiple for selecting multiple files, and required for mandatory file selection.
Example − Accept Specific File Types
<!DOCTYPE html>
<html>
<head>
<title>File Upload with Accept Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Images Only</h2>
<form>
<label for="imageFile">Select an image:</label><br>
<input type="file" id="imageFile" name="image" accept="image/*">
</form>
<h2>Upload Documents Only</h2>
<form>
<label for="docFile">Select a document:</label><br>
<input type="file" id="docFile" name="document" accept=".pdf,.doc,.docx">
</form>
</body>
</html>
The accept attribute filters the file browser to show only specified file types. The first input accepts all image formats, while the second accepts only PDF and Word documents.
Upload Images Only Select an image: [Choose File] No file chosen Upload Documents Only Select a document: [Choose File] No file chosen
Example − Multiple File Selection
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Multiple Files</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="multipleFiles">Select multiple images:</label><br>
<input type="file" id="multipleFiles" name="files[]" accept="image/*" multiple><br><br>
<input type="submit" value="Upload Files">
</form>
</body>
</html>
The multiple attribute allows users to select multiple files at once. The enctype="multipart/form-data" is required for file uploads to work properly.
Upload Multiple Files Select multiple images: [Choose File] No file chosen [Upload Files]
Styled File Upload Button
By default, file upload buttons have limited styling options. To create custom-styled upload buttons, we can hide the default input and use a label or button to trigger the file selection.
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom Styled File Upload</title>
<style>
.custom-file-upload {
display: inline-block;
padding: 10px 20px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
}
.custom-file-upload:hover {
background-color: #45a049;
}
#fileInput {
display: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Styled Upload Button</h2>
<form>
<label for="fileInput" class="custom-file-upload">
Choose File
</label>
<input type="file" id="fileInput" name="myfile">
<span id="fileName"></span>
</form>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
document.getElementById('fileName').textContent = fileName;
});
</script>
</body>
</html>
This creates a green button that displays the selected file name. The original input is hidden, and the label acts as the clickable upload button.
Custom Styled Upload Button [Choose File] (green button with hover effect)
File Upload with JavaScript Validation
JavaScript can be used to validate file uploads before submission, checking file size, type, and other properties.
Example
<!DOCTYPE html>
<html>
<head>
<title>File Upload with Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>File Upload with Size Validation</h2>
<form>
<input type="file" id="fileInput" name="upload" accept="image/*">
<p id="message"></p>
</form>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
const file = e.target.files[0];
const message = document.getElementById('message');
if (file) {
const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
if (file.size > 2 * 1024 * 1024) { // 2MB limit
message.textContent = `File too large: ${fileSizeMB}MB. Maximum size is 2MB.`;
message.style.color = 'red';
e.target.value = '';
} else {
message.textContent = `File selected: ${file.name} (${fileSizeMB}MB)`;
message.style.color = 'green';
}
}
});
</script>
</body>
</html>
This example validates that uploaded images are under 2MB and displays appropriate success or error messages.
File Upload with Size Validation [Choose File] No file chosen (Message appears here after file selection)
File Upload Attributes
Following are the key attributes used with file upload inputs −
| Attribute | Description | Example |
|---|---|---|
accept |
Specifies which file types are accepted |
accept="image/*", accept=".pdf,.doc"
|
multiple |
Allows selection of multiple files | multiple |
required |
Makes file selection mandatory | required |
name |
Identifies the file data on the server | name="uploadedFile" |
id |
Unique identifier for JavaScript and CSS | id="fileInput" |
Conclusion
Creating file upload buttons in HTML requires the <input type="file"> element within a form. Use the accept attribute to filter file types, multiple for multiple selections, and JavaScript for advanced validation and custom styling. Always include enctype="multipart/form-data" in the form for proper file submission.
1K+ Views
