How to Create Custom Input File with Bootstrap?

Last Updated : 26 Jul, 2024

This article will show you how to create a custom input file using the Bootstrap 5 library. Bootstrap 5 has various styling file input classes and functionalities that can enhance the visual appearance of custom file input. There are two different approaches along with their implementation. In both conditions, uploading a single file and multiple files from the local drive to the application.

Using Bootstrap Custom File Input with Button

Here, we have used the input-group which wraps the file input and a button. Then the file input is styled using the form-control class. Also, we have used the Modal component to provide feedback to the user when the file is successfully uploaded. Here, the single file upload is been handled by the file input.

Example: In this example, we will be creating a custom input file with Bootstrap 5 with Button.

HTML

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

<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content= 
		"width=device-width, initial-scale=1"> 
	<title>Custom Input File</title> 
	<link href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
		rel="stylesheet"> 
</head> 

<body> 
	<div class="container mt-5"> 
		<h1 class="text-success"> 
			GeeksforGeeks 
		</h1> 
		
		<h3 class="mb-4"> 
			Approach 1: Using Bootstrap Custom 
			File Input with Button 
		</h3> 
		
		<div class="input-group mb-3"> 
			<input type="file" class="form-control" id="customFile"> 
			<button class="btn btn-primary"
				type="button" data-bs-toggle="modal"
				data-bs-target="#uploadModal">Upload</button> 
		</div> 

		<div class="modal fade" id="uploadModal"
			tabindex="-1" aria-labelledby="uploadModalLabel"
			aria-hidden="true"> 
			<div class="modal-dialog"> 
				<div class="modal-content"> 
					<div class="modal-header"> 
						<h5 class="modal-title"
							id="uploadModalLabel"> 
							Upload Successful 
						</h5> 
						<button type="button"
							class="btn-close"
							data-bs-dismiss="modal"
							aria-label="Close"> 
						</button> 
					</div> 
					<div class="modal-body"> 
						Your file has been successfully uploaded. 
					</div> 
					<div class="modal-footer"> 
						<button type="button"
							class="btn btn-secondary"
							data-bs-dismiss="modal"> 
							Close 
						</button> 
					</div> 
				</div> 
			</div> 
		</div> 
	</div> 
	<script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> 
	</script> 
</body> 

</html>

Output:

Using Bootstrap Input Group with Icon

Here, we have used the input-group class along with the icon using the input-group-text class. There is an icon through which the user can upload multiple files in the application. We have used JavaScript to display the uploaded images on the screen in a proper layout.

Example: In this example, we will be creating a custom input file with Bootstrap 5 with Icon.

HTML

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

<head> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content= 
		"width=device-width, initial-scale=1"> 
	<title>Custom Input File</title> 
	<link href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
		rel="stylesheet"> 
	<link href= 
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.2/font/bootstrap-icons.min.css"
		rel="stylesheet"> 
</head> 

<body> 
	<div class="container mt-5"> 
		<h1 class="text-success"> 
			GeeksforGeeks 
		</h1> 
		
		<h3 class="mb-4"> 
			Approach 2: Using Bootstrap Input Group with Icon 
		</h3> 
		
		<div class="input-group mb-3"> 
			<label class="input-group-text" for="customFile"> 
				<i class="bi bi-file-earmark-image"></i> 
			</label> 
			<input type="file" class="form-control visually-hidden"
				id="customFile" accept="image/*" multiple 
				onchange="showFiles(this)"> 
			<button class="btn btn-success" type="button"
				onclick="document.getElementById('customFile').click()"> 
				Choose Files 
			</button> 
		</div> 

		<div class="mt-3"> 
			<div class="row" id="imagePreviews"></div> 
		</div> 
	</div> 

	<script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> 
	</script> 
	
	<script> 
		function showFiles(input) { 
			const previewsContainer = 
				document.getElementById('imagePreviews'); 
				
			previewsContainer.innerHTML = ''; 
			const files = input.files; 
			for (let i = 0; i < files.length; i++) { 
				const file = files[i]; 
				const reader = new FileReader(); 
				reader.onload = function (e) { 
					const preview = document.createElement('div'); 
					preview.classList.add('col-md-4', 'mb-3'); 
					preview.innerHTML = ` 
			<img src="${e.target.result}" alt="Preview" class="img-fluid rounded"> 
			<div class="text-center mt-2"> 
			<span class="badge bg-secondary">${file.name}</span> 
			</div> 
		`; 
					previewsContainer.appendChild(preview); 
				}; 
				reader.readAsDataURL(file); 
			} 
		} 
	</script> 
</body> 

</html>

Output:

How to create a Bootstrap panel with a heading ?

gpancomputer

Improve

Article Tags :

How to Create Custom Input File with Bootstrap?

Using Bootstrap Custom File Input with Button

Output:

Using Bootstrap Input Group with Icon

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?