How to Create a File Upload Button in HTML?

Last Updated : 28 Oct, 2024

Uploading files through an HTML form is essential for many web applications, as it enables users to easily share documents, images, and other types of files. To create a file upload button in HTML, we can use the <input> element with type="file" attribute inside a <form> tag.

Creating a Basic File Upload Button

Basic File Upload Button when the user selects a file using the file upload button, the name of the file will appear next to the button once selected.

Syntax

<input type="file">

HTML

<h1>Upload Your File</h1>
<form>
	<input type="file" id="fileUpload" name="fileUpload">
	<input type="submit" value="Upload">
</form>

Output

Screenshot-2024-10-11-173950 — Basic File Upload Button

Customizing File Upload Button

User experience can be enhanced by customizing the appearance of the file upload button using CSS. For example, you can hide the default button and create a custom button for better styling. For this we style the <input> and the <label> tag.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .file-upload {
            display: none;
        }

        .custom-button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .custom-button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <h1>Upload Your File</h1>
    <form>
        <input type="file" id="fileUpload" class="file-upload"
            name="fileUpload">
        <label for="fileUpload" class="custom-button">
            Choose File
        </label>
        <input type="submit" value="Upload">
    </form>
</body>

</html>

Output

Screenshot-2024-10-11-174145 — Customizing the File Upload Button

Handling File Uploads in JavaScript

To provide feedback or further handle the file after selection, you can use JavaScript. This can be useful for displaying the file name or validating the file type before uploading.