{"id":6995,"date":"2018-09-06T10:12:45","date_gmt":"2018-09-06T10:12:45","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=6995"},"modified":"2019-06-27T11:14:52","modified_gmt":"2019-06-27T11:14:52","slug":"dropzone-multiple-subida-de-archivos-con-bootstrap-y-php","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/dropzone-multiple-subida-de-archivos-con-bootstrap-y-php\/","title":{"rendered":"Dropzone m\u00faltiple subida de archivos con Bootstrap y PHP"},"content":{"rendered":"

En este tutorial vamos explicar en detalle c\u00f3mo agregar a un formulario la posibilidad de subir m\u00faltiples archivos al servidor<\/strong> utilizando la biblioteca Dropzonejs<\/strong>, Bootstrap 4<\/strong>, PHP<\/strong> y jQuery Sortable<\/strong>.<\/p>\n

La subida masiva de archivos al servidor es una tarea pendiente que hace mucho tiempo quer\u00edamos \u00a0incluir en este blog pero, es dif\u00edcil encontrar el plugin perfecto para incorporar la subida masiva de archivos y de esta forma ahorrarte mucho trabajo.<\/p>\n

La m\u00faltiple subida de archivos<\/strong> puede resultar muy \u00fatil en los casos espec\u00edficos cuando necesitas que el usuario pueda subir varios archivos a la vez al servidor sin tener que seleccionar los archivos de uno en uno.<\/p>\n

Dropzonejs<\/strong> es una biblioteca de c\u00f3digo abierto que proporciona la carga de archivos arrastrando y soltando con vista previa de im\u00e1genes<\/strong>. Es muy liviano ya que no depende de ninguna otra librer\u00eda (como jQuery<\/strong>) y es altamente personalizable.<\/p>\n

Dropzonejs<\/strong> quiz\u00e1 es uno de las librer\u00edas m\u00e1s interesantes y gratuitas que hay para implementar la m\u00faltiple subida de archivos<\/strong> del lado del cliente debido a que de cara al usuario es muy pr\u00e1ctico y r\u00e1pido. Esto indica que la usabilidad del mismo es muy alta y por tanto atractiva para incluir en nuestras p\u00e1ginas Webs.<\/p>\n

Bien es cierto que la librer\u00eda Dropzonejs<\/strong> nos va a ahorrar mucho trabajo pero, esto no deja de lado que tengas un trabajo para conseguir que esta biblioteca funcione con PHP<\/strong> y de esta forma permita la subida de archivos al servidor<\/strong>.<\/p>\n

En este art\u00edculo vamos a explicar un ejemplo pr\u00e1ctico que permite al usuario subir im\u00e1genes al servidor utilizando dropzonejs, Bootstrap 4, PHP y jQuery sortable<\/strong>.<\/p>\n

En el ejemplo en funcionamiento las im\u00e1genes se suben directamente al servidor una vez arrestres y sueltes o las selecciones desde el ordenador pulsando en el bot\u00f3n verde \u201cA\u00f1adir im\u00e1genes\u2026\u201d.<\/p>\n

Dropzonejs<\/strong> puede ser descargado desde la p\u00e1gina oficial<\/a>.<\/p>\n

Existe un tutorial de esta implementaci\u00f3n utilizando Bootstrap<\/strong> en la que nos hemos basado para crear nuestro ejemplo. Ver Dropzone Bootstrap tutorial<\/a>.<\/p>\n

En la cabecera de la p\u00e1gina o dentro de la etiqueta <head> agregamos los estilos y scripts necesarios para hacer funcionar nuestro ejemplo.<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css"<\/span>><\/span>\n<link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"css\/styles.css"<\/span>><\/span>\n<script<\/span><\/a> src<\/span>=<\/span>"https:\/\/code.jquery.com\/jquery-3.2.1.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<script<\/span><\/a> src<\/span>=<\/span>"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<script<\/span><\/a> src<\/span>=<\/span>"js\/dropzone.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span>\n<script<\/span><\/a> src<\/span>=<\/span>"js\/jquery-ui.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Estamos incluyendo los archivos necesarios para tener disponibles las posibilidades que ofrece Bootstrap<\/strong>, nuestra hoja de estilos personalizada, la librer\u00eda jQuery<\/strong> y jQuery Ui<\/strong> para poder ordenar los elementos y finalmente la biblioteca dropzonejs<\/strong>.<\/p>\n
En nuestra hoja de estilos styles.css <\/em>tan solo agregamos algunos estilos que usamos para el ejemplo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
#previews<\/span> {<\/span>\n  padding<\/span>:<\/span> 15px<\/span>;<\/span>\n  padding-top<\/span>:<\/span> 0px<\/span>;<\/span>\n  padding-bottom<\/span>:<\/span> 0px<\/span>;<\/span>\n  margin-top<\/span>:<\/span> 15px<\/span>;<\/span>\n  min-height<\/span>:<\/span> 220px<\/span>;<\/span>\n  background-color<\/span>:<\/span> #fbfbfb<\/span>;<\/span>\n}<\/span>\n \n.dropzone-here<\/span> {<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n    padding-top<\/span>:<\/span> 60px<\/span>;<\/span>\n    width<\/span>:<\/span> 100<\/span>%<\/span>;<\/span>\n    position<\/span>:<\/span> absolute<\/span>;<\/span>\n    font-size<\/span>:<\/span> 18px<\/span>;<\/span>\n    font-weight<\/span>:<\/span> bold<\/span>;<\/span>\n    top<\/span>:<\/span> 50px<\/span>;<\/span>\n}<\/span>\n \n#previews<\/span> .file-row<\/span> .delete<\/span> {<\/span>\n    display<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span>\n \n#previews<\/span> .file-row<\/span>.dz-success<\/span> .start,<\/span>\n#previews<\/span> .file-row<\/span>.dz-success<\/span> .cancel<\/span> {<\/span>\n    display<\/span>:<\/span> none<\/span>;<\/span>\n}<\/span>\n \n#previews<\/span> .file-row<\/span>.dz-success<\/span> .delete<\/span> {<\/span>\n    display<\/span>:<\/span> block<\/span>;<\/span>\n}<\/span>\n \n.dz-image-preview<\/span> {<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #d6d4d4<\/span>;<\/span>\n    padding-top<\/span>:<\/span> 15px<\/span>;<\/span>\n    padding-bottom<\/span>:<\/span> 15px<\/span>;<\/span>\n    margin-bottom<\/span>:<\/span> 15px<\/span>;<\/span>\n}<\/span>\n \n.preview<\/span> {<\/span>\n    position<\/span>:<\/span> relative<\/span>;<\/span>\n    background<\/span>:<\/span> #fff<\/span>;<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #dadada<\/span>;<\/span>\n    text-align<\/span>:<\/span> center<\/span>;<\/span>\n    display<\/span>:<\/span> table-cell<\/span>;<\/span>\n    vertical-align<\/span>:<\/span> middle<\/span>;<\/span>\n}<\/span>\n \n.preview<\/span> img {<\/span>\n    cursor<\/span>:<\/span> pointer<\/span>;<\/span>\n}<\/span>\n \n.progress<\/span> {<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #ccc<\/span>;<\/span>\n    position<\/span>:<\/span> relative<\/span>;<\/span>\n    display<\/span>:<\/span> block<\/span>;<\/span>\n    height<\/span>:<\/span> 22px<\/span>;<\/span>\n    padding<\/span>:<\/span> 0<\/span>;<\/span>\n    min-width<\/span>:<\/span> 200px<\/span>;<\/span>\n    margin<\/span>:<\/span>4px<\/span> 0<\/span>;<\/span>\n    background<\/span>:<\/span> #DEDEDE<\/span>;<\/span>\n    background<\/span>:<\/span> -webkit-gradient(<\/span>linear,<\/span> left<\/span> top<\/span>,<\/span> left<\/span> bottom<\/span>,<\/span> from(<\/span>#ccc<\/span>)<\/span>,<\/span> to(<\/span>#e9e9e9<\/span>)<\/span>)<\/span>;<\/span>\n    background<\/span>:<\/span> -moz-linear-gradient(<\/span>top<\/span>,<\/span> #ccc<\/span>,<\/span> #e9e9e9<\/span>)<\/span>;<\/span>\n    filter:<\/span>  progid:DXImageTransform<\/span>.Microsoft<\/span>.gradient(<\/span>startColorstr=<\/span>'#cccccc'<\/span>,<\/span> endColorstr=<\/span>'#e9e9e9'<\/span>)<\/span>;<\/span>\n    -moz-box-shadow:<\/span>0 1px<\/span> 0 #fff<\/span>;<\/span>\n    -webkit-box-shadow:<\/span>0 1px<\/span> 0 #fff<\/span>;<\/span>\n    box-shadow:<\/span>0 1px<\/span> 0 #fff<\/span>;<\/span>\n    -moz-border-radius:<\/span> 4px<\/span>;<\/span>\n    -webkit-border-radius:<\/span> 4px<\/span>;<\/span>\n    border-radius:<\/span> 4px<\/span>;<\/span>\n}<\/span>\n \n.progress-bar<\/span> {<\/span>\n    color<\/span>:<\/span> #ffffff<\/span>;<\/span>\n    display<\/span>:<\/span> block<\/span>;<\/span>\n    height<\/span>:<\/span> 20px<\/span>;<\/span>\n    margin<\/span>:<\/span> 0<\/span>;<\/span>\n    padding<\/span>:<\/span> 0<\/span>;<\/span>\n    text-align<\/span>:<\/span>center<\/span>;<\/span>\n    -moz-box-shadow:<\/span>inset<\/span> 0 1px<\/span> 0 rgba(<\/span>255,<\/span>255,<\/span>255,<\/span>0.5)<\/span>;<\/span>\n    -webkit-box-shadow:<\/span>inset<\/span> 0 1px<\/span> 0 rgba(<\/span>255,<\/span>255,<\/span>255,<\/span>0.5)<\/span>;<\/span>\n    box-shadow:<\/span>inset<\/span> 0 1px<\/span> 0 rgba(<\/span>255,<\/span>255,<\/span>255,<\/span>0.5)<\/span>;<\/span>\n    -moz-border-radius:<\/span> 3px<\/span>;<\/span>\n    -webkit-border-radius:<\/span> 3px<\/span>;<\/span>\n    border-radius:<\/span> 3px<\/span>;<\/span>\n    border<\/span>:<\/span> 1px<\/span> solid<\/span> #0078a5<\/span>;<\/span>\n    background-color<\/span>:<\/span> #5C9ADE<\/span>;<\/span>\n    background<\/span>:<\/span> -moz-linear-gradient(<\/span>top<\/span>,<\/span> #00adee<\/span> 10<\/span>%<\/span>,<\/span> #0078a5<\/span> 90<\/span>%<\/span>)<\/span>;<\/span>\n    background<\/span>:<\/span> -webkit-gradient(<\/span>linear,<\/span> left<\/span> top<\/span>,<\/span> left<\/span> bottom<\/span>,<\/span> color-stop(<\/span>0.1,<\/span> #00adee<\/span>)<\/span>,<\/span> color-stop(<\/span>0.9,<\/span> #0078a5<\/span>)<\/span>)<\/span>;<\/span>\n}<\/span><\/pre><\/div><\/div>\n
Dentro del <body> o cuerpo de la p\u00e1gina, en el formulario puedes incluir el siguiente c\u00f3digo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<form<\/span><\/a> action<\/span>=<\/span>"index.php"<\/span> method<\/span>=<\/span>"post"<\/span> enctype<\/span>=<\/span>"multipart\/form-data"<\/span>><\/span>\n    <div<\/span><\/a> class<\/span>=<\/span>"fallback"<\/span>><\/span>\n        <input<\/span><\/a> name<\/span>=<\/span>"file"<\/span> type<\/span>=<\/span>"file"<\/span> multiple<\/span> \/<\/span>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n    <div<\/span><\/a> id<\/span>=<\/span>"actions"<\/span> class<\/span>=<\/span>"row"<\/span>><\/span>\n        <div<\/span><\/a> class<\/span>=<\/span>"col-lg-7"<\/span>><\/span>\n            <!-- The fileinput-button span is used to style the file input field as button --><\/span>\n            <span<\/span><\/a> class<\/span>=<\/span>"btn btn-success fileinput-button"<\/span>><\/span>\n                <i<\/span><\/a> class<\/span>=<\/span>"glyphicon glyphicon-plus"<\/span>><\/<\/span>i<\/span><\/a>><\/span>\n                <span<\/span><\/a>><\/span>Add files...<\/<\/span>span<\/span><\/a>><\/span>\n            <\/<\/span>span<\/span><\/a>><\/span>\n            <button<\/span><\/a> type<\/span>=<\/span>"submit"<\/span> class<\/span>=<\/span>"btn btn-primary start"<\/span> style<\/span>=<\/span>"display: none;"<\/span>><\/span>\n                <i<\/span><\/a> class<\/span>=<\/span>"glyphicon glyphicon-upload"<\/span>><\/<\/span>i<\/span><\/a>><\/span>\n                <span<\/span><\/a>><\/span>Start upload<\/<\/span>span<\/span><\/a>><\/span>\n            <\/<\/span>button<\/span><\/a>><\/span>\n            <button<\/span><\/a> type<\/span>=<\/span>"reset"<\/span> class<\/span>=<\/span>"btn btn-warning cancel"<\/span> style<\/span>=<\/span>"display: none;"<\/span>><\/span>\n                <i<\/span><\/a> class<\/span>=<\/span>"glyphicon glyphicon-ban-circle"<\/span>><\/<\/span>i<\/span><\/a>><\/span>\n                <span<\/span><\/a>><\/span>Cancel upload<\/<\/span>span<\/span><\/a>><\/span>\n            <\/<\/span>button<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n \n        <div<\/span><\/a> class<\/span>=<\/span>"col-lg-5"<\/span>><\/span>\n            <!-- The global file processing state --><\/span>\n            <span<\/span><\/a> class<\/span>=<\/span>"fileupload-process"<\/span>><\/span>\n                <div<\/span><\/a> id<\/span>=<\/span>"total-progress"<\/span> class<\/span>=<\/span>"progress progress-striped active"<\/span> role=<\/span>"progressbar"<\/span> aria-valuemin=<\/span>"0"<\/span> aria-valuemax=<\/span>"100"<\/span> aria-valuenow=<\/span>"0"<\/span>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"progress-bar progress-bar-success"<\/span> style<\/span>=<\/span>"width:0%;"<\/span> data-dz-uploadprogress><\/<\/span>div<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n            <\/<\/span>span<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n \n    <div<\/span><\/a> class<\/span>=<\/span>"table table-striped files"<\/span> id<\/span>=<\/span>"previews"<\/span>><\/span>\n        <div<\/span><\/a> id<\/span>=<\/span>"template"<\/span> class<\/span>=<\/span>"file-row row"<\/span>><\/span>\n            <!-- This is used as the file preview template --><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"col-xs-12 col-lg-3"<\/span>><\/span>\n                <span<\/span><\/a> class<\/span>=<\/span>"preview"<\/span> style<\/span>=<\/span>"width:160px;height:160px;"<\/span>><\/span>\n                    <img<\/span><\/a> data-dz-thumbnail \/<\/span>><\/span>\n                <\/<\/span>span<\/span><\/a>><\/span>\n                <br<\/span><\/a>\/<\/span>><\/span>\n                <button<\/span><\/a> class<\/span>=<\/span>"btn btn-primary start"<\/span> style<\/span>=<\/span>"display:none;"<\/span>><\/span>\n                    <i<\/span><\/a> class<\/span>=<\/span>"glyphicon glyphicon-upload"<\/span>><\/<\/span>i<\/span><\/a>><\/span>\n                    <span<\/span><\/a>><\/span>Empezar<\/<\/span>span<\/span><\/a>><\/span>\n                <\/<\/span>button<\/span><\/a>><\/span>\n                <button<\/span><\/a> data-dz-remove class<\/span>=<\/span>"btn btn-warning cancel"<\/span>><\/span>\n                    <i<\/span><\/a> class<\/span>=<\/span>"icon-ban-circle fa fa-ban-circle"<\/span>><\/<\/span>i<\/span><\/a>><\/span> \n                    <span<\/span><\/a>><\/span>Cancelar<\/<\/span>span<\/span><\/a>><\/span>\n                <\/<\/span>button<\/span><\/a>><\/span>\n                <button<\/span><\/a> data-dz-remove class<\/span>=<\/span>"btn btn-danger delete"<\/span>><\/span>\n                    <i<\/span><\/a> class<\/span>=<\/span>"icon-trash fa fa-trash"<\/span>><\/<\/span>i<\/span><\/a>><\/span> \n                    <span<\/span><\/a>><\/span>Eliminar<\/<\/span>span<\/span><\/a>><\/span>\n                <\/<\/span>button<\/span><\/a>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n            <div<\/span><\/a> class<\/span>=<\/span>"col-xs-12 col-lg-9"<\/span>><\/span>\n                <p<\/span><\/a> class<\/span>=<\/span>"name"<\/span> data-dz-name><\/<\/span>p<\/span><\/a>><\/span>\n                <p<\/span><\/a> class<\/span>=<\/span>"size"<\/span> data-dz-size><\/<\/span>p<\/span><\/a>><\/span>\n                <div<\/span><\/a>><\/span>\n                    <strong<\/span><\/a> class<\/span>=<\/span>"error text-danger"<\/span> data-dz-errormessage><\/<\/span>strong<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n                <div<\/span><\/a>><\/span>\n                    <div<\/span><\/a> class<\/span>=<\/span>"progress progress-striped active"<\/span> role=<\/span>"progressbar"<\/span> aria-valuemin=<\/span>"0"<\/span> aria-valuemax=<\/span>"100"<\/span> aria-valuenow=<\/span>"0"<\/span>><\/span>\n                      <div<\/span><\/a> class<\/span>=<\/span>"progress-bar progress-bar-success"<\/span> style<\/span>=<\/span>"width:0%;"<\/span> data-dz-uploadprogress><\/<\/span>div<\/span><\/a>><\/span>\n                    <\/<\/span>div<\/span><\/a>><\/span>\n                <\/<\/span>div<\/span><\/a>><\/span>\n            <\/<\/span>div<\/span><\/a>><\/span>\n        <\/<\/span>div<\/span><\/a>><\/span>\n    <\/<\/span>div<\/span><\/a>><\/span>\n \n    <div<\/span><\/a> class<\/span>=<\/span>"dropzone-here"<\/span>><\/span>Drop files here to upload.<\/<\/span>div<\/span><\/a>><\/span>\n<\/<\/span>form<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Este c\u00f3digo es el formulario que en el ejemplo tan solo permite subir im\u00e1genes directamente al servidor. Como puedes observar hay 3 partes bien diferenciadas. Tenemos el bloque de acciones donde en nuestro ejemplo tan solo nos interesa mostrar el bot\u00f3n para agregar im\u00e1genes. La plantilla dentro del contenedor con id=\u00bbpreviews\u00bb que se usa para mostrar la imagen previa de cada elemento. Y finalmente, justo debajo, la zona para arrastrar y soltar.<\/p>\n
El c\u00f3digo m\u00e1s interesante y que ejecuta la acci\u00f3n se puede situar en la cabecera justo despu\u00e9s de la llamada a las librer\u00edas o justo antes de la etiqueta de cierre <\/body>.<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<<\/span>script><\/span>\n\/\/ Get the template HTML and remove it from the doument<\/span>\nvar<\/span> previewNode =<\/span> document.querySelector<\/span>(<\/span>"#template"<\/span>)<\/span>;<\/span>\npreviewNode.id<\/span> =<\/span> ""<\/span>;<\/span>\nvar<\/span> previewTemplate =<\/span> previewNode.parentNode<\/span>.innerHTML<\/span>;<\/span>\npreviewNode.parentNode<\/span>.removeChild<\/span>(<\/span>previewNode)<\/span>;<\/span>\n \nvar<\/span> myDropzone =<\/span> new<\/span> Dropzone(<\/span>document.body<\/span>,<\/span> {<\/span>\n    url:<\/span> "upload.php"<\/span>,<\/span>\n    paramName:<\/span> "file"<\/span>,<\/span>\n    acceptedFiles:<\/span> 'image\/*'<\/span>,<\/span>\n    maxFilesize:<\/span> 2<\/span>,<\/span>\n    maxFiles:<\/span> 3<\/span>,<\/span>\n    thumbnailWidth:<\/span> 160<\/span>,<\/span>\n    thumbnailHeight:<\/span> 160<\/span>,<\/span>\n    thumbnailMethod:<\/span> 'contain'<\/span>,<\/span>\n    parallelUploads:<\/span> 20,<\/span>\n    previewTemplate:<\/span> previewTemplate,<\/span>\n    autoQueue:<\/span> true<\/span>,<\/span>\n    previewsContainer:<\/span> "#previews"<\/span>,<\/span>\n    clickable:<\/span> ".fileinput-button"<\/span>\n}<\/span>)<\/span>;<\/span>\n \nmyDropzone.on<\/span>(<\/span>"addedfile"<\/span>,<\/span> function<\/span>(<\/span>file)<\/span> {<\/span>\n    $(<\/span>'.dropzone-here'<\/span>)<\/span>.hide<\/span>(<\/span>)<\/span>;<\/span>\n    \/\/ Hookup the start button<\/span>\n    file.previewElement<\/span>.querySelector<\/span>(<\/span>".start"<\/span>)<\/span>.onclick<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span> myDropzone.enqueueFile<\/span>(<\/span>file)<\/span>;<\/span> }<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n \n\/\/ Update the total progress bar<\/span>\nmyDropzone.on<\/span>(<\/span>"totaluploadprogress"<\/span>,<\/span> function<\/span>(<\/span>progress)<\/span> {<\/span>\n    document.querySelector<\/span>(<\/span>"#total-progress .progress-bar"<\/span>)<\/span>.style<\/span>.width<\/span> =<\/span> progress +<\/span> "%"<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n \nmyDropzone.on<\/span>(<\/span>"sending"<\/span>,<\/span> function<\/span>(<\/span>file)<\/span> {<\/span>\n    \/\/ Show the total progress bar when upload starts<\/span>\n    document.querySelector<\/span>(<\/span>"#total-progress"<\/span>)<\/span>.style<\/span>.opacity<\/span> =<\/span> "1"<\/span>;<\/span>\n    \/\/ And disable the start button<\/span>\n    file.previewElement<\/span>.querySelector<\/span>(<\/span>".start"<\/span>)<\/span>.setAttribute<\/span>(<\/span>"disabled"<\/span>,<\/span> "disabled"<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n \n\/\/ Hide the total progress bar when nothing's uploading anymore<\/span>\nmyDropzone.on<\/span>(<\/span>"queuecomplete"<\/span>,<\/span> function<\/span>(<\/span>progress)<\/span> {<\/span>\n    \/\/document.querySelector("#total-progress").style.opacity = "0";<\/span>\n}<\/span>)<\/span>;<\/span>\n \n\/\/ Setup the buttons for all transfers<\/span>\n\/\/ The "add files" button doesn't need to be setup because the config<\/span>\n\/\/ `clickable` has already been specified.<\/span>\ndocument.querySelector<\/span>(<\/span>"#actions .start"<\/span>)<\/span>.onclick<\/span> =<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n    myDropzone.enqueueFiles<\/span>(<\/span>myDropzone.getFilesWithStatus<\/span>(<\/span>Dropzone.ADDED<\/span>)<\/span>)<\/span>;<\/span>\n}<\/span>;<\/span>\n \n$(<\/span>'#previews'<\/span>)<\/span>.sortable<\/span>(<\/span>{<\/span>\n    items:<\/span>'.file-row'<\/span>,<\/span>\n    cursor:<\/span> 'move'<\/span>,<\/span>\n    opacity:<\/span> 0.5<\/span>,<\/span>\n    containment:<\/span> "parent"<\/span>,<\/span>\n    distance:<\/span> 20<\/span>,<\/span>\n    tolerance:<\/span> 'pointer'<\/span>,<\/span>\n    update:<\/span> function<\/span>(<\/span>e,<\/span> ui)<\/span>{<\/span>\n        \/\/actions when sorting<\/span>\n    }<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
En el c\u00f3digo anterior estamos estableciendo el contenedor que har\u00e1 de vista previa y hacemos una llamada a la clase Dropzone<\/strong> con algunos par\u00e1metros que explicamos a continuaci\u00f3n:<\/p>\n