Cómo crear cargas de archivos mediante arrastrar y soltar en React con react-dropzone

Introducción

react-dropzonees un componente React compatible con HTML5 para gestionar el arrastrar y soltar archivos.

HTML5 admite la carga de archivos con input type="file" /. react-dropzoneLe proporciona funcionalidad adicional, como personalizar la zona de colocación, mostrar una vista previa y restringir los tipos y cantidades de archivos.

Nota: Si está trabajando con Vue en lugar de React, consulte nuestro tutorial para vue-dropzone.

En este tutorial, aprenderá cómo agregar elementos react-dropzonea sus proyectos React y explorará algunas de las funciones que ofrece.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Un entorno de desarrollo local para Node.js. Sigue Cómo instalar Node.js y crear un entorno de desarrollo local .

Este tutorial fue verificado con Node v15.3.0, npmv7.4.0, reactv17.0.1 y react-dropzonev11.2.4.

Paso 1: Configuración del proyecto

Comience a usar create-react-apppara generar una aplicación React y luego instale las dependencias:

npx create-react-app react-dropzone-example

Cambiar al nuevo directorio del proyecto:

cd react-dropzone-example

Instalar react-dropzone:

npm install react-dropzone@11.2.4

En este punto, tienes un nuevo proyecto React con react-dropzone.

Paso 2: agregar el componente Dropzone

react-dropzoneTiene configuraciones predeterminadas que le permiten agregarlo con una configuración mínima.

Como mínimo, necesitará una onDroppropiedad que maneje los archivos soltados y algún texto de llamada a la acción para ayudar a limitar cualquier confusión del usuario:

fuente/DropzoneComponent.js

import React, { useCallback } from 'react';import { useDropzone } from 'react-dropzone';function DropzoneComponent() {  const onDrop = useCallback(acceptedFiles = {    console.log(acceptedFiles);  }, []);  const {    getRootProps,    getInputProps  } = useDropzone({    onDrop  });  return (    div {...getRootProps()}      input {...getInputProps()} /      divDrag and drop your images here./div    /div  )}export default DropzoneComponent;

Este código proporciona la funcionalidad de arrastrar y soltar para su aplicación.

Nota: Vale la pena señalar que, si bien react-dropzoneestá diseñado para arrastrar y soltar archivos, acepta eventos de clic en la zona de colocación de manera predeterminada, lo que iniciará un cuadro de diálogo para la selección de archivos.

Añade el componente a tu aplicación React:

fuente/App.js

import DropzoneComponent from './DropzoneComponent';function App() {  return (    div className="App"      DropzoneComponent /    /div  );}export default App;

Ejecute su aplicación y obsérvela en un navegador web. Debería ver un div con el texto: Drag and drop your images here.

Experimente arrastrando y soltando varios archivos en el componente Dropzone de React. Actualmente, el código usa un console.logpara mostrar los archivos. La información de los archivos cargados incluye name, lastModified, sizey type.

En este punto, tienes un componente Dropzone de React en funcionamiento con la configuración predeterminada. Las opciones de configuración adicionalesreact-dropzone de la documentación .

Paso 3: Dar estilo al componente Dropzone

De forma predeterminada, react-dropzoneno tendrá estilos. La documentación proporciona estilos para una apariencia común que utiliza una combinación de bordes flexbox y discontinuos para indicar a los usuarios un área para arrastrar y soltar archivos.

react-dropzoneTambién admite propiedades para cuando se interactúa activamente con el componente ( isDragActive), se acepta el archivo ( isDragAccept) o se rechaza el archivo ( isDragReject).

Revise su archivo DropzoneComponenty modifíquelo para usar isDragActive, isDragAccepty isDragRejectcuando se aplique a los tipos de archivos de imagen JPEG y PNG:

fuente/DropzoneComponent.js

import React, { useCallback, useMemo } from 'react';import { useDropzone } from 'react-dropzone';const baseStyle = {  display: 'flex',  flexDirection: 'column',  alignItems: 'center',  padding: '20px',  borderWidth: 2,  borderRadius: 2,  borderColor: '#eeeeee',  borderStyle: 'dashed',  backgroundColor: '#fafafa',  color: '#bdbdbd',  transition: 'border .3s ease-in-out'};const activeStyle = {  borderColor: '#2196f3'};const acceptStyle = {  borderColor: '#00e676'};const rejectStyle = {  borderColor: '#ff1744'};function DropzoneComponent(props) {  const onDrop = useCallback(acceptedFiles = {    console.log(acceptedFiles);  }, []);  const {    getRootProps,    getInputProps,    isDragActive,    isDragAccept,    isDragReject  } = useDropzone({    onDrop,    accept: 'image/jpeg, image/png'  });  const style = useMemo(() = ({    ...baseStyle,    ...(isDragActive ? activeStyle : {}),    ...(isDragAccept ? acceptStyle : {}),    ...(isDragReject ? rejectStyle : {})  }), [    isDragActive,    isDragReject,    isDragAccept  ]);  return (    div {...getRootProps({style})}      input {...getInputProps()} /      divDrag and drop your images here./div    /div  )}export default DropzoneComponent;

Este código producirá el siguiente resultado:

Cambiar la apariencia del componente de aceptaciones y rechazos puede ayudar a proporcionar retroalimentación al usuario sobre si su archivo es válido o no.

Paso 4: agregar vistas previas de imágenes

Una vista previa es una copia de la imagen que se arrastra y suelta en el componente. Esto resulta útil para proporcionar una respuesta visual al usuario para verificar el contenido del archivo de imagen que seleccionó.

Las vistas previas se eliminaron en la versión 7.0.0, sin embargo, la documentación proporciona una alternativa para leerla con una combinación de Object.assign()y URL.createObjectURL().

Revisa tu sitio DropzoneComponenty modifícalo para utilizar preview:

fuente/DropzoneComponent.js

import React, { useCallback, useEffect, useMemo, useState } from 'react';import { useDropzone } from 'react-dropzone';const baseStyle = {  display: 'flex',  flexDirection: 'column',  alignItems: 'center',  padding: '20px',  borderWidth: 2,  borderRadius: 2,  borderColor: '#eeeeee',  borderStyle: 'dashed',  backgroundColor: '#fafafa',  color: '#bdbdbd',  transition: 'border .3s ease-in-out'};const activeStyle = {  borderColor: '#2196f3'};const acceptStyle = {  borderColor: '#00e676'};const rejectStyle = {  borderColor: '#ff1744'};function DropzoneComponent(props) {  const [files, setFiles] = useState([]);  const onDrop = useCallback(acceptedFiles = {    setFiles(acceptedFiles.map(file = Object.assign(file, {      preview: URL.createObjectURL(file)    })));  }, []);  const {    getRootProps,    getInputProps,    isDragActive,    isDragAccept,    isDragReject  } = useDropzone({    onDrop,    accept: 'image/jpeg, image/png'  });  const style = useMemo(() = ({    ...baseStyle,    ...(isDragActive ? activeStyle : {}),    ...(isDragAccept ? acceptStyle : {}),    ...(isDragReject ? rejectStyle : {})  }), [    isDragActive,    isDragReject,    isDragAccept  ]);  const thumbs = files.map(file = (    div key={file.name}      img        src={file.preview}        alt={file.name}      /    /div  ));  // clean up  useEffect(() = () = {    files.forEach(file = URL.revokeObjectURL(file.preview));  }, [files]);  return (    section      div {...getRootProps({style})}        input {...getInputProps()} /        divDrag and drop your images here./div      /div      aside        {thumbs}      /aside    /section  )}export default DropzoneComponent;

Nota: Para evitar pérdidas de memoria, deberá llamar URL.revokeObjectURL(file.preview)para evitar almacenar la vista previa innecesariamente.

Ahora, cada vez que se elimine un archivo (o archivos), el archivo se agregará al estado y se mostrará una vista previa.

Conclusión

En este tutorial, se le presentó react-dropzoney aprendió cómo se puede utilizar en una aplicación React para proporcionar una funcionalidad avanzada de arrastrar y soltar para cargas de archivos.

Si desea obtener más información sobre React, eche un vistazo a nuestra serie Cómo codificar en React.js o consulte nuestra página de temas de React para ver ejercicios y proyectos de programación.