Bootstrap 5 Input File estilos. Bootstrap es uno de los framework de estilos muy utilizado en desarrollos de sistemas y páginas web a nivel mundial, el uso de HTML, CSS y JavaScript más populares actualmente.
Gracias a este potente framework de estilos, podemos crear estructuras rápidamente ahorrando tiempo al utilizar recursos desarrollados previamente: clases CSS, componentes JavaScript sobre JQuery, entre otros.
Además, Bootstrap es responsive y compatible con los navegadores más utilizados en el internet.
Bootstrap 5 Input File estilos
A continuación, veremos acerca de la etiqueta Input tipo File (carga de archivos al servidor), usaremos tanto BootStrap 4 y BootStrap 5.
A) Input file Bootstrap 4
BootStrap 4 para gestionar correctamente el nombre de archivo en la etiqueta file necesita de una librería externa y una pequeña declaración de JavaScript, veamos un ejemplo.
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
bsCustomFileInput.init()
var btn = document.getElementById('btnResetForm')
var form = document.querySelector('form')
btn.addEventListener('click', function() {
form.reset()
})
</script>El código anterior hace que el input almacene el nombre del fichero
Ahora, mostraremos la integración completa: tanto el HTML, librería BootStrap, Librería bs-custom-file-input.min.js
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Bootstrap 4 custom dynamic file input with no dependencies.">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap 4 Input File</title>
<style>
.navbar {
min-height: 60px;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<nav class="navbar navbar-expand navbar-dark bg-dark text-white">
<div class="container">
<h1 class="mb-0 h5 py-1">BaulPHP</h1>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="https://www.baulphp.com">Portada</a>
</li>
</ul>
<a href="#" class="text-white ml-3 py-1 text-decoration-none">
</a>
</div>
</nav>
<div class="container flex-grow-1 flex-shrink-0 mt-5">
<div class="row">
<div class="col-sm-12">
<h3>Ejemplos</h3>
<div class="input-group mt-3">
<div class="custom-file">
<input id="inputGroupFile01" type="file" class="custom-file-input">
<label class="custom-file-label" for="inputGroupFile01">Elija el archivo</label>
</div>
</div>
<div class="input-group mt-3">
<div class="custom-file">
<input id="inputGroupFile02" type="file" multiple class="custom-file-input">
<label class="custom-file-label" for="inputGroupFile02">Elige varios archivos</label>
</div>
</div>
</div>
<div class="col-sm-12 mt-5">
<h3>Ejemplo con formulario</h3>
<form class="mt-3">
<div class="form-group row">
<div class="col-sm-10">
<button id="btnResetForm" class="btn btn-primary">
Limpiar formulario
</button>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<div class="input-group mt-3">
<div class="custom-file">
<input id="inputGroupFile03" type="file" class="custom-file-input">
<label class="custom-file-label" for="inputGroupFile03">Elija el archivo</label>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-12 mt-5">
<h3>Ejemplo con etiqueta que contiene un hijo</h3>
<div class="custom-file mt-2">
<input id="inputGroupFile04" type="file" class="custom-file-input" multiple>
<label class="custom-file-label" for="inputGroupFile04">
<span class="d-inline-block text-truncate w-75">Elige varios archivos</span>
</label>
</div>
</div>
</div>
</div>
<footer class="bg-light p-3 mt-4">
<div class="container">
<p class="text-muted text-center mb-0">
Power by <a href="https://www.baulphp.com">BaulPHP</a>
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
bsCustomFileInput.init()
var btn = document.getElementById('btnResetForm')
var form = document.querySelector('form')
btn.addEventListener('click', function() {
form.reset()
})
</script>
</body>
</html>B) Input file Bootstrap 5
El input de entrada de archivos proporciona formas personalizadas de tomar la entrada de los archivos. Es decir, la entrada del archivo puede aceptarse como predeterminada, o puede aceptar múltiples archivos o puede deshabilitarse.
Para controlar los diferentes tamaños de la entrada del archivo, simplemente podemos especificar la clase .form-control seguida del atributo form-control-sm o form-control-lg.
De forma predeterminada, los controles de formulario tienen un ancho del 100 %.
Controles de formulario Clases de entrada de archivos:
form-control-sm: esta clase ayuda a reducir el tamaño a pequeño para la entrada del archivo.
form-control-lg: esta clase ayuda a aumentar el tamaño de la entrada del archivo.
Controles de formulario Atributos de entrada de archivo:
- predeterminado: este atributo no requiere especificarse explícitamente.
- múltiple: este atributo permite la aceptación de múltiples archivos para la entrada a la vez.
- disabled: este atributo deshabilita o desactiva el campo de entrada para aceptar cualquier archivo.
Primer Ejemplo: este ejemplo describe el uso básico de la entrada de archivo de controles de formulario en Bootstrap5 mediante la implementación de la entrada de archivo múltiple y predeterminada.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<div class="container">
<h1 class="text-success">
BaulPHP
</h1>
<h3>Controles de formulario Entrada de archivo</h3>
<div class="mb-3">
<label for="DefaultFile"
class="form-label">
Entrada de archivo predeterminada
</label>
<input class="form-control"
type="file"
id="DefaultFile">
</div>
<div class="mb-3">
<label for="MultipleFile"
class="form-label">
Entrada de archivos múltiples
</label>
<input class="form-control"
type="file"
id="MultipleFile" multiple>
</div>
</div>
</body>
</html>Segundo ejemplo: este ejemplo describe el uso básico de la entrada de archivo de controles de formulario en Bootstrap5 al implementar la entrada de archivo pequeño con múltiples atributos y la entrada de archivo grande con el atributo deshabilitado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="text-center">
<div class="container">
<h1 class="text-success">
BaulPHP
</h1>
<h3>Controles de formulario Entrada de archivo</h3>
<div class="mb-3">
<label for="SmallFile"
class="form-label">
Archivo pequeño con entrada múltiple
</label>
<input class="form-control
form-control-sm"
id="SmallFile"
type="file" multiple>
</div>
<div>
<label for="largeFile"
class="form-label">
Archivo grande con entrada deshabilitada
</label>
<input class="form-control
form-control-lg"
id="largeFile"
type="file" disabled>
</div>
</div>
</body>
</html>Conclusiones y recomendaciones
Como hemos podido apreciar en BootStrap 5 es más fácil la integración a comparación de BootStrap 4 que requiere una librería especial.
La integración del framework Bootstrap hace que nuestras etiquetas sean más amigables con el usuario final y nos brinda un aspecto profesional a la hora de interactuar con elementos de formulario.
Se recomienda el uso de este framework u otro para gestionar etiquetas HTML5
