bs-dropzone.js
Ligero y de fácil implementación hecho para bootstrap 4.
Proyecto mantenido por Wilfredo Nina Choquetarqui
¿Qué es bs-dropzone.js?
Es una extensión para jQuery
y Bootstrap
que permite transformar visualmente un elemento de entrada para archivos <input type="file">
en un elemento que permite los gestos de arrastrar y soltar dentro de una zona, es totalmente personalizable y permite hacer una llamada de función cuando el evento change
es ejecutado.
¿Qué necesito?
Un navegador moderno y las dependencias de jQuery
y Bootstrap
en sus versiones correspondientes.
¿Cómo se usa?
Incluya dentro de su proyecto los archivos bs-dropzone.css
y bs-dropzone.js
que debe descargar previamente.
<link rel="stylesheet" href="bs-dropzone.css">
<script type="text/javascript" src="bs-dropzone.js"></script>
Aplicación por defecto.
<input type="file" name="file">
// aplica arrastrar y soltar en el elemento :file
$('#elemento').bs_dropzone();
Visualización de imágenes.
// aplica arrastrar y soltar en el elemento :file
$('#elemento').bs_dropzone({
preview: true
});
Asignación de clases personalizadas sobre la zona de arrastrar y soltar.
// aplica arrastrar y soltar en el elemento :file
$('#elemento').bs_dropzone({
boxClass: 'alert p-5 text-center font-weight-bold',
noneColorClass: 'alert-info border-info',
dragColorClass: 'alert-warning border-warning',
doneColorClass: 'alert-success border-success',
failColorClass: 'alert-danger border-danger'
});
Asignación de textos personalizados.
// aplica arrastrar y soltar en el elemento :file
$('#elemento').bs_dropzone({
language:{
emptyText: '[arrastrar aquí]',
dragText: '[soltar aquí]',
dropText: '[_t_ por guardar]'
}
});
Asignación de clases personalizadas sobre la zona de arrastrar y soltar en selección multiple de archivos.
<input type="file" name="files" multiple>
// aplica arrastrar y soltar en el elemento :file
$('#elemento').bs_dropzone({
preview: true,
accepted: ['jpg', 'jpeg', 'png'],
dropzoneTemplate: '<div class="bs-dropzone"><div class="bs-dropzone-area"></div><div class="bs-dropzone-message"></div><div class="bs-dropzone-preview mt-0"></div></div>',
parentTemplate: '<div class="row ml-0 justify-content-center align-items-center"></div>',
childTemplate: '<div class="col-4 col-md-3 pl-0"></div>',
imageClass: 'img-fluid mt-3 rounded'
});
Ejecución de una función luego de la selección.
// aplica arrastrar y soltar en el elemento :file
$('#elemento').bs_dropzone({
change: function (element, files) {
alert(files.length + ' archivos cargados');
}
});
Como habrá visto la librería es muy fácil de implementar y personalizar ya que permite incluir clases propias, además con el evento change
podemos extender aún más las funcionalidades, pero eso ya depende de las necesidades específicas de su aplicación.
Para los ejemplos también se esta haciendo uso de la librería para validación de formularios jQuery Form Validator
, si desea que la funcionalidad sea similar al de los ejemplos puede utilizar esa herramienta.
Soporte o contacto
¿Tienes problemas? Ponte en contacto con wilnicho@gmail.com