Plugin de mejora de entrada de archivo elegante con JavaScript-filepond

Tiempo de ejecución: 30 minutos. Empezar

Autor: pqina
Views Total: 2,366
Sitio oficial: Ir a la web
Actualizado: April 12, 2019
Licencia: MIT

Vista prévia

Plugin de mejora de entrada de archivo elegante con JavaScript-filepond

Descripción

filepond es un plugin de carga de archivos JavaScript que le ayuda a crear una entrada de archivo elegante, flexible, personalizable, de arrastrar y soltar en la Página Web. También cuenta con vista previa de archivos, carga de varios archivos, procesamiento del lado del servidor y mucho más. Licenciado bajo GPL 3,0.

¿Cómo funciona?

Incluye la hoja de estilos de filepond ' filepond. css ' y JavaScript ' filepond. js ' en la página HTML.

<link href="filepond.css" rel="stylesheet">
<script src="filepond.js"></script>

Cree el campo de carga de archivos en la página web como estos:

<div class="demo" id="demo">


<div class="filepond-ripple filepond-ripple-one"></div>

<div class="filepond-ripple filepond-ripple-two"></div>

<div class="filepond-ripple filepond-ripple-three"></div>


<div class="filepond-wrapper">



<input type="file"




 name="filepond"




 multiple




 data-max-total-files="10"




 data-max-file-size="3MB"/>


</div>

</div>

Inicializar el plugin y listo.

var pond = FilePond.create( document.querySelector('input[type="file"]') );

Override the default options to customize the file uploader.

FilePond.setOptions({


// the id to add to the root element

id: [null, Type.STRING],


// input field name to use

name: ['filepond', Type.STRING],


// classname to put on wrapper

className: [null, Type.STRING],


// is the field required

required: [false, Type.BOOLEAN],


// Allow media capture when value is set

captureMethod: [null, Type.STRING],

// - "camera", "microphone" or "camcorder",

// - Does not work with multiple on apple devices

// - If set, acceptedFileTypes must be made to match with media wildcard "image/*", "audio/*" or "video/*"


// Feature toggles

allowDrop: [true, Type.BOOLEAN], // Allow dropping of files

allowBrowse: [true, Type.BOOLEAN], // Allow browsing the file system

allowPaste: [true, Type.BOOLEAN], // Allow pasting files

allowMultiple: [false, Type.BOOLEAN], // Allow multiple files (disabled by default, as multiple attribute is also required on input to allow multiple)

allowReplace: [true, Type.BOOLEAN], // Allow dropping a file on other file to replace it (only works when multiple is set to false)

allowRevert: [true, Type.BOOLEAN], // Allows user to revert file upload


// Revert mode

forceRevert: [false, Type.BOOLEAN], // Set to 'force' to require the file to be reverted before removal


// Input requirements

maxFiles: [null, Type.INT], // Max number of files

checkValidity: [false, Type.BOOLEAN], // Enables custom validity messages


// Where to put file

itemInsertLocation: ['before', Type.STRING], // Default index in list to add items that have been dropped at the top of the list

itemInsertInterval: [75, Type.INT],


// Drag 'n Drop related

dropOnPage: [false, Type.BOOLEAN], // Allow dropping of files anywhere on page (prevents browser from opening file if dropped outside of Up)

dropOnElement: [true, Type.BOOLEAN], // Drop needs to happen on element (set to false to also load drops outside of Up)

dropValidation: [false, Type.BOOLEAN], // Enable or disable validating files on drop

ignoredFiles: [['.ds_store', 'thumbs.db', 'desktop.ini'], Type.ARRAY],


// Upload related

instantUpload: [true, Type.BOOLEAN], // Should upload files immidiately on drop

maxParallelUploads: [2, Type.INT], // Maximum files to upload in parallel


// The server api end points to use for uploading (see docs)

server: [null, Type.SERVER_API],


// Labels and status messages

labelDecimalSeparator: [getDecimalSeparator(), Type.STRING], // Default is locale separator

labelThousandsSeparator: [getThousandsSeparator(), Type.STRING], // Default is locale separator


labelIdle: [


'Drag & Drop your files or <span class="filepond--label-action">Browse</span>',


Type.STRING

],

labelInvalidField: ['Field contains invalid files', Type.STRING],

labelFileWaitingForSize: ['Waiting for size', Type.STRING],

labelFileSizeNotAvailable: ['Size not available', Type.STRING],

labelFileCountSingular: ['file in list', Type.STRING],

labelFileCountPlural: ['files in list', Type.STRING],

labelFileLoading: ['Loading', Type.STRING],

labelFileAdded: ['Added', Type.STRING], // assistive only

labelFileLoadError: ['Error during load', Type.STRING],

labelFileRemoved: ['Removed', Type.STRING], // assistive only

labelFileRemoveError: ['Error during remove', Type.STRING],

labelFileProcessing: ['Uploading', Type.STRING],

labelFileProcessingComplete: ['Upload complete', Type.STRING],

labelFileProcessingAborted: ['Upload cancelled', Type.STRING],

labelFileProcessingError: ['Error during upload', Type.STRING],

labelFileProcessingRevertError: ['Error during revert', Type.STRING],


labelTapToCancel: ['tap to cancel', Type.STRING],

labelTapToRetry: ['tap to retry', Type.STRING],

labelTapToUndo: ['tap to undo', Type.STRING],


labelButtonRemoveItem: ['Remove', Type.STRING],

labelButtonAbortItemLoad: ['Abort', Type.STRING],

labelButtonRetryItemLoad: ['Retry', Type.STRING],

labelButtonAbortItemProcessing: ['Cancel', Type.STRING],

labelButtonUndoItemProcessing: ['Undo', Type.STRING],

labelButtonRetryItemProcessing: ['Retry', Type.STRING],

labelButtonProcessItem: ['Upload', Type.STRING],


// make sure width and height plus viewpox are even numbers so icons are nicely centered

iconRemove: [


'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M11.586 13l-2.293 2.293a1 1 0 0 0 1.414 1.414L13 14.414l2.293 2.293a1 1 0 0 0 1.414-1.414L14.414 13l2.293-2.293a1 1 0 0 0-1.414-1.414L13 11.586l-2.293-2.293a1 1 0 0 0-1.414 1.414L11.586 13z" fill="currentColor" fill-rule="nonzero"/></svg>',


Type.STRING

],

iconProcess: [


'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M14 10.414v3.585a1 1 0 0 1-2 0v-3.585l-1.293 1.293a1 1 0 0 1-1.414-1.415l3-3a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.415L14 10.414zM9 18a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2H9z" fill="currentColor" fill-rule="evenodd"/></svg>',


Type.STRING

],

iconRetry: [


'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M10.81 9.185l-.038.02A4.997 4.997 0 0 0 8 13.683a5 5 0 0 0 5 5 5 5 0 0 0 5-5 1 1 0 0 1 2 0A7 7 0 1 1 9.722 7.496l-.842-.21a.999.999 0 1 1 .484-1.94l3.23.806c.535.133.86.675.73 1.21l-.804 3.233a.997.997 0 0 1-1.21.73.997.997 0 0 1-.73-1.21l.23-.928v-.002z" fill="currentColor" fill-rule="nonzero"/></svg>',


Type.STRING

],

iconUndo: [


'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M9.185 10.81l.02-.038A4.997 4.997 0 0 1 13.683 8a5 5 0 0 1 5 5 5 5 0 0 1-5 5 1 1 0 0 0 0 2A7 7 0 1 0 7.496 9.722l-.21-.842a.999.999 0 1 0-1.94.484l.806 3.23c.133.535.675.86 1.21.73l3.233-.803a.997.997 0 0 0 .73-1.21.997.997 0 0 0-1.21-.73l-.928.23-.002-.001z" fill="currentColor" fill-rule="nonzero"/></svg>',


Type.STRING

],

iconDone: [


'<svg width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg"><path d="M18.293 9.293a1 1 0 0 1 1.414 1.414l-7.002 7a1 1 0 0 1-1.414 0l-3.998-4a1 1 0 1 1 1.414-1.414L12 15.586l6.294-6.293z" fill="currentColor" fill-rule="nonzero"/></svg>',


Type.STRING

],


// styles

stylePanelLayout: [null, Type.STRING], // null 'integrated', 'compact', 'circle'

stylePanelAspectRatio: [null, Type.STRING], // null or '3:2' or 1

styleItemPanelAspectRatio: [null, Type.STRING],

styleButtonRemoveItemPosition: ['left', Type.STRING],

styleButtonProcessItemPosition: ['right', Type.STRING],

styleLoadIndicatorPosition: ['right', Type.STRING],

styleProgressIndicatorPosition: ['right', Type.STRING],


// custom initial files array

files: [[], Type.ARRAY]

})

Controladores de eventos y enlaces.

FilePond.setOptions({

// event handlers

oninit: [null, Type.FUNCTION],

onwarning: [null, Type.FUNCTION],

onerror: [null, Type.FUNCTION],

onactivatefile: [null, Type.FUNCTION],

onaddfilestart: [null, Type.FUNCTION],

onaddfileprogress: [null, Type.FUNCTION],

onaddfile: [null, Type.FUNCTION],

onprocessfilestart: [null, Type.FUNCTION],

onprocessfileprogress: [null, Type.FUNCTION],

onprocessfileabort: [null, Type.FUNCTION],

onprocessfilerevert: [null, Type.FUNCTION],

onprocessfile: [null, Type.FUNCTION],

onprocessfiles: [null, Type.FUNCTION],

onremovefile: [null, Type.FUNCTION],

onpreparefile: [null, Type.FUNCTION],

onupdatefiles: [null, Type.FUNCTION],


// hooks

beforeAddFile: [null, Type.FUNCTION],

beforeRemoveFile: [null, Type.FUNCTION],
})

Registro de cambios

v4.4.0 (04/12/2019)

  • Se soluciona un problema en el que addFile no respeía la configuración de itemInsertLocation.
  • Agregue el gancho beforeDropFile que se puede usar para validar un elemento caído antes de agregarlo, asegúrese de que dropValidation está establecido en true también.

v4.3.9 (04/11/2019)

  • Se soluciona un problema en el que al deshabilitar y volver a habilitar FilePond no se volvería a habilitar el botón examinar.

v4.3.8 (04/09/2019)

  • Mejore la accesibilidad de los botones

v4.3.7 (04/08/2019)

  • Se soluciona un problema en el que la llamada abortAll se desencadenó al destruir FilePond desencadenaría accidentalmente el punto final del servidor. Remove para cada archivo local.

v4.3.5 (03/26/2019)

  • solucionado el problema por el que cambiar el ' stylePanelAspectRatio ' no actualizaría el tamaño del contenedor

v4.3.4 (03/26/2019)

  • Agregue el código fuente.
  • Agregue scripts de compilación.
  • Fix onremovefile callback no recibe un objeto de error similar a onaddfile.

v4.3.3 (03/22/2019)

  • Se soluciona un problema en el que no funcionaba la anulación de una carga de archivos mientras se preparaba el archivo (por ejemplo, codificado).
  • Se soluciona un problema en el que los archivos de 0 bytes no se cargarlas en el servidor.
  • Agregar propiedad status a la instancia de FilePond, utilice esta propiedad para determinar el estado actual de FilePond (EMPTY, IDLE, ERROR, BUSY o READY).

v4.3.0 (03/21/2019)

  • Se soluciona un problema en el que addFiles no asignaría correctamente las opciones pasadas a los archivos.
  • Se soluciona un problema en el que el error de carga impedía el procesamiento de otros archivos.
  • Se soluciona el problema en el que el campo no "existía" si no tenía ningún valor. Ahora bien, si FilePond está vacío, el elemento de entrada de archivo interno se le da el atributo name, esto se elimina cuando se agrega un archivo (ya que el nombre está presente en el elemento de entrada oculto del archivo).
  • Agregue onprocessfiles que se llama cuando se han procesado todos los archivos.
  • Agregar onactivatefile al que se llama cuando un usuario hace clic o toca en un elemento de archivo.

v4.2.0 (02/19/2019)

  • Agregar propiedad deshabilitada, se puede establecer como un atributo en la entrada de archivo o como una propiedad en el objeto de opciones FilePond.
  • Agregue los clics de captura en todo el elemento de etiqueta del estanque para que sea más fácil hacer clic en la etiqueta.

v4.1.3 (02/15/2019)

  • Solo oculte las imágenes de previsualización al cambiar el tamaño de la ventana horizontalmente, corrige problemas con los eventos de cambio de tamaño en iOS.
  • Mejore la forma en que FilePond reanuda el dibujo cuando una pestaña conserva el foco.

v4.1.2 (02/15/2019)

  • Mejore la forma en que FilePond reanuda el dibujo cuando una pestaña conserva el foco.

v4.1.1 (02/15/2019)

  • Soluciona un problema donde la animación de sacudida de error arruinaría la vista previa de la imagen.

v4.1.0 (02/07/2019)

  • Agregar propiedad itemInsertLocationFreedom, establecida en false para impedir que el usuario seleccionar la ubicación en la lista de archivos donde se agrega el archivo.

v4.0.2 (02/05/2019)

  • Múltiples mejoras, pequeñas correcciones y nuevas características. A medida que la actualización dará lugar a cambios de velocidad de animación, cambios en la forma en que los archivos se agregan a la lista de archivos, y requerirá una actualización del complemento de vista previa de la imagen, la versión se ha golpeado a 4.0.0

v3.9.0 (02/05/2019)

  • Agregar Checkvalidez que se establece en false de forma predeterminada. Si se establece en true, FilePond establecerá el contenido de la propiedad labelInvalidField como el mensaje de validez personalizado del campo si contiene archivos no válidos (archivos que, por ejemplo, superan el tamaño máximo de archivo o fallan otras pruebas).

v3.8.2 (02/05/2019)

  • Solucionado el problema con el objeto anular ItemStatus en el método processfiles

v3.8.2 (01/31/2019)

  • Soluciona el problema en el que el mensaje de error de quitar servidor se pasó directamente al cliente sin etiqueta. Establezca labelFileRemoveError en una cadena para cambiar el error predeterminado, establecelo en una función para mostrar un error de servidor personalizado. {labelFileRemoveError: serverError = > serverError}

v3.8.1 (01/31/2019)

  • Exponer la llamada de envío a extensiones de elemento de complemento.

v3.8.0 (01/30/2019)

  • agregar la opción forceRevert, limpie las rutas de código obsoletas

v3.7.7 (01/29/2019)

  • Mejore el evento onlistupdate para que pueda sincronizarse mejor con los componentes del adaptador.

v3.7.6 (01/18/2019)

  • Se ha cambiado el texto de búsqueda subrayado a texto-decoración-SKIP-Ink: auto en lugar de texto-decoración-SKIP: Ink para evitar advertencias de eslint.

v3.7.5 (01/14/2019)

  • Se soluciona un problema por el que llamar a processFiles sin argumentos volvería a procesar archivos ya procesados.

v3.7.4 (01/04/2019)

  • Se soluciona un problema en el que las llamadas subsiguientes a processFile no revertirían automáticamente un archivo cargado o anulan una carga activa.

v3.7.3 (01/02/2019)

  • Se soluciona un problema en el que no se mostraría el indicador completo de carga cuando la previsualización de imagen estaba activa.

v3.7.2 (01/01/2019)

  • Exponer createItemAPI a plugins.

v3.7.1 (12/27/2018)

  • Se soluciona un problema en el que las direcciones URL estarían immidiately en estado procesado.

v3.7.0 (12/22/2018)

  • Agregue la opción Maxparallelsubidas para limitar la cantidad de archivos que se cargan en paralelo.
  • Agregar opción para capturar solo el cabezal de archivo al descargar direcciones URL remotas. El archivo se descarga en el servidor y el servidor envía un ID de archivo único al cliente. Establezca Server. Fetch. Method en ' HEAD ' el servidor necesita volver a estanque con el encabezado personalizado X-Content-Transfer-ID y un identificador único. Consulte handle_fetch_remote_file en FilePond PHP Server para obtener un ejemplo de implementación.

v3.6.0 (12/19/2018)

  • Agregar compatibilidad para cargar variantes de complemento de transformación
  • Agregar compatibilidad para modificar formData antes de enviarlo al servidor

v3.5.1 (12/14/2018)

  • Se soluciona un problema en el que ' processFile ' y ' processFiles ' reprocesarían los archivos ya procesados.

v3.5.0 (12/03/2018)

  • Agregar beforeAddFile Hook

v3.4.0 (12/02/2018)

  • Agregar Server. Remove propiedad, esta propiedad puede establecerse opcionalmente en un método para llamar cuando el Remove botón se pulsa en un archivo local. Esto permite eliminar archivos del servidor. Tenga en cuenta que permitir a los clientes eliminar archivos del servidor es un riesgo potencial para la seguridad y requiere precaución adicional.
  • De forma predeterminada, la propiedad es NULL. El Consejo es no utilizar este método y sólo realizar cambios en el servidor después de que se ha enviado el formulario principal. El formulario POST contendrá todos los nombres de archivo cargados y los datos de archivo relevantes, debería ser suficiente para determinar los archivos a eliminar y los archivos a guardar.

v3.3.3 (11/30/2018)

  • Corrija el nombre de archivo que coincida con el encabezado de disposición de contenido cuando el nombre de archivo no se ajusta entre comillas.
  • Se soluciona un problema en el que los caracteres especiales del nombre impidieron que se añadiera un archivo

v3.3.2 (11/17/2018)

  • Corregir problema donde revertir llamada revertiría elemento de archivo incorrecto

v3.3.1 (11/15/2018)

  • Soluciona un problema en el que exceder el límite máximo de archivos no lanzaría un error

v3.3.0 (11/01/2018)

  • Agregar característica para actualizar los metadatos de forma silenciosa para que no desencadene una actualización.

v3.2.5 (10/26/2018)

  • Se soluciona un problema en el que los elementos se quitarían antes de que las vistas sub de elemento estuvieran en estado de reposo.

v3.2.4 (10/25/2018)

  • Soluciona un problema en el que la renderización del lado del servidor no funcionaría correctamente
  • Se soluciona un problema en el que no se llamaba beforeRemoveFile Hook cuando se encontraba en el modo instantUpload y se reviviría una carga.

v3.2.2 (10/24/2018)

  • Agregar preparativos para el procesamiento de archivos en cola.

v3.2.0 (10/23/2018)

  • DD global scoped propiedad para el pintor por lo que varias bibliotecas pueden suscribirse a leer y escribir operaciones DOM. Esto es principalmente en preparación para una versión independiente del plugin Image Editor.

v3.1.5 (10/21/2018)

  • Solucionar problemas con los trabajadores en IE/Edge

v3.1.4 (10/19/2018)

  • Corregir el error de sintaxis
  • Corrija otro problema con las eliminaciones rápidas de archivos.
  • Se soluciona un problema en el que la llamada a Remove provocaba errores en función del estado de la carga.
  • Se soluciona un problema en el que al hacer clic en anular antes de la subida no se cancelaría la carga.

v3.1.1 (10/12/2018)

  • mejoras en la forma en que FilePond renderiza el panel a varias alturas

v3.1.0 (10/10/2018)

  • Mejore el comparar al actualizar la propiedad files.
  • Agregue la devolución de llamada onupdatefiles que se desencadena cuando se agrega o se quita un archivo a una instancia del estanque.

v3.0.3 (10/09/2018)

  • fija para IE 11

v3.0.2 (10/02/2018)

  • etiqueta de corrección no se puede hacer clic en el modo de diseño integrado

v3.0.1 (10/02/2018)

  • solucionar el problema con el desencadenador de tiempo de espera de solicitud demasiado pronto

v3.0.0 (10/02/2018)

  • múltiples pequeñas correcciones y cierta racionalización de código para facilitar la edición de imágenes plugin

v2.3.0 (09/24/2018)

  • Añadir el gancho beforeRemoveFile
  • Mejorar la detección del entorno del navegador

v2.2.1 (09/14/2018)

  • Se soluciona otro problema en el que el desbordamiento de lista no se representaría correctamente.

v2.2.0 (09/05/2018)

  • Solucionado el problema por el que maxFiles no se imponía al colocar un conjunto de archivos, cada archivo se agregó en secuencia hasta que se alcanzó maxFiles mientras que el conjunto como un todo debería haber sido invalidado a la vez.

v2.1.3 (09/04/2018)

  • Se soluciona un problema en el que la lista de archivos no respetaría la altura máxima de la raíz de filepond.
  • Limpiado algunos babelHelpers callejeros.
  • Corregir el error en el método de estilo del motor de renderización, debe resultar en menos redibuja innecesarios.

v2.1.1 (08/27/2018)

  • Se soluciona un problema en el que el indicador de caída se representaría en la ubicación equivocada.
  • Se soluciona un problema en el que al llamar a removeFile directamente después de resolver processFile se produce un error.

v2.1.0 (08/18/2018)

  • Las etiquetas ahora se pueden establecer como funciones, estas funciones recibirán información de contexto, esto es útil para personalizar tanto el error de carga y el procesamiento de etiquetas de error en función de la respuesta del servidor.

v2.0.1 (08/12/2018)

  • Agregue utilidades adicionales a la API del plugin.

v2.0.0 (08/12/2018)

  • Reemplace automáticamente el icono de flecha hacia la izquierda del botón Deshacer con el icono del botón eliminar cuando instantUpload está establecido en true.

v1.8.8 (07/13/2018)

  • agregar el control de metadatos para agregar el método de archivo

v1.8.7 (07/13/2018)

  • solucionar el problema donde allowRevert: false ocultaría el botón Quitar

v1.8.6 (07/04/2018)

  • solucionar el problema donde agregar dataURIs lanzaría error

v1.8.5 (06/29/2018)

  • Corrija la conversión de atributos de entrada sin valor para corregir Boolean

v1.8.4 (06/28/2018)

  • Solucionado el problema donde el tiempo de espera de respuesta lanzaría un error
  • Mejore el manejo del valor devuelto procesando la función OnLoad

v1.8.3 (06/26/2018)

  • limpiar el código extraviado

v1.8.2 (06/26/2018)

  • solucionar el problema donde las opciones no se reemplazar correctamente

v1.8.1 (06/25/2018)

  • controlar BLOB con la propiedad Name como si se tratara de un archivo

v1.8.0 (06/19/2018)

  • Agregar opción para simular archivos temporales y de servidor, agregue el método createView a la vista de información de archivo, agregue la opción para establecer los metadatos iniciales para los archivos temporales y locales

v1.7.3 (06/19/2018)

  • hacer que los eventos asincrónicos

v1.7.2 (06/14/2018)

  • Agregar filtro de vista al nodo de estado de archivo

v1.7.1 (05/31/2018)

  • solucionar el problema donde la configuración del objeto no se leyó correctamente

v1.7.0 (05/29/2018)

  • Agregar callback OnError para analizar las respuestas del servidor personalizado

v1.6.2 (05/29/2018)

  • solucionar el problema donde el archivo temporal restaurado no se eliminará correctamente

v1.6.1 (05/28/2018)

  • agregar objeto de enumeración FileOrigin al objeto FilePond

v1.5.2 (05/23/2018)

  • eliminar el ancho máximo en estado

Te puede interesar: