Componente de carga de diseño Ant de ReactJS UI

. El componente de carga se utiliza para cargar archivos arrastrando. Podemos usar el siguiente enfoque en ReactJS para usar el componente de carga de diseño Ant.

Cargar accesorios:

• aceptar: se utiliza para indicar los tipos de archivos que se pueden aceptar.
• acción: se utiliza para indicar la URL de carga.
• beforeUpload: Es una función Hook que se ejecutará antes de subir.
• customRequest: se utiliza para anular el comportamiento xhr predeterminado.
• datos: se utiliza para cargar parámetros adicionales o funciones que pueden devolver la carga de parámetros adicionales.
• defaultFileList: se utiliza para indicar la lista predeterminada de archivos que se han cargado.
• directorio: se utiliza para admitir la carga de todo el directorio.
• disabled: Se utiliza para deshabilitar el botón de carga.
• fileList: se utiliza para indicar la lista de archivos que se han cargado.
• encabezados: se utiliza para establecer encabezados de solicitud.
• iconRender: se utiliza para el icono de presentación personalizado.
• isImageUrl: se utiliza para personalizar si se representa <img /> en miniatura.
• itemRender: se utiliza para el elemento personalizado de uploadList.
• listType: son las hojas de estilo incorporadas, soporte para texto, imagen o tipo de tarjeta de imagen.
• maxCount: Se utiliza para limitar el número de archivos subidos.
• método: Es el método HTTP de solicitud de carga.
• múltiple: se utiliza para indicar si se admiten varios archivos seleccionados.
• nombre: se utiliza para indicar el nombre del archivo que se está cargando.
• openFileDialogOnClick: se utiliza para abrir el cuadro de diálogo del archivo al hacer clic en él.
• previewFile: Se utiliza para la lógica de archivo de vista previa personalizada.
• progreso: Se utiliza para la barra de progreso personalizada.
• showUploadList: Se utiliza para indicar si mostrar la lista de carga predeterminada.
• withCredentials: Es la subida de Ajax con cookie enviada.
• onChange: es una función de devolución de llamada que se activa cuando cambia el estado de carga.
• onDrop: es una función de devolución de llamada que se activa cuando los archivos se arrastran y sueltan en el área de carga.
• onDownload: Es el método para descargar el archivo cuando se hace clic en él.
• onPreview: es una función de devolución de llamada que se activa cuando se hace clic en un enlace de archivo o en un icono de vista previa.
• onRemove: es una función de devolución de llamada que se activa cuando se hace clic en el botón de eliminación de archivos.

Cargar archivo Props:

• nombre: Se utiliza para denotar el nombre del archivo.
• porcentaje: se utiliza para indicar el porcentaje de progreso de carga.
• estado: se utiliza para indicar el estado de carga.
• thumbUrl: se utiliza para pasar la URL de la imagen del pulgar.
• uid: Es la identificación única, y se generará automáticamente cuando no se proporcione.
• url : se utiliza para indicar la URL de descarga.

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import { Upload, message, Button } from 'antd';
  
const props = {
  headers: {
    authorization: 'authorization-text',
  },
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  name: 'file',
};
  
export default function App() {
  
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design Upload Component</h4>
      <>
        <Upload {...props}
          onChange={(response) => {
            if (response.file.status !== 'uploading') {
              console.log(response.file, response.fileList);
            }
            if (response.file.status === 'done') {
              message.success(`${response.file.name} 
                               file uploaded successfully`);
            } else if (response.file.status === 'error') {
              message.error(`${response.file.name} 
                             file upload failed.`);
            }
          }}
        >
          <Button>Upload File</Button>
        </Upload>
      </>
    </div>
  );
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/upload/