Subida de archivos (File Upload)

El componente File Upload (Subida de archivos) está diseñado para manejar fácilmente la acción de arrastrar y soltar archivos, así como la selección de archivos a través de la ventana de diálogo. Admite características como restricción de tipo de archivo, tamaño máximo de archivo, títulos personalizados y descripciones.

Uso

Para usar FileUpload, impórtalo desde tus componentes y pasa las props necesarias, incluyendo accept (aceptar), onFilesAdded (al agregar archivos), y opcionalmente, onFilesRejected (al rechazar archivos), maxSize (tamaño máximo), disabled (deshabilitado), maxFiles (archivos máximos), title (título), uploadDescription (descripción de carga), preventDropOnDocument y size (tamaño).

Subida de archivos básica

Un ejemplo sencillo de subida de archivos con una configuración mínima.

import React from "react";
import { FileUpload } from "@firecms/ui";

export default function FileUploadBasicDemo() {
    const onFilesAdded = (files: File[]) => {
        console.log(files);
    };

    return (
        <FileUpload
            size={"large"}
            accept={{ "image/*": [] }}
            onFilesAdded={onFilesAdded}
            title="Upload your file"
            uploadDescription="Drag and drop a file here or click"
        />
    );
}

Subida de archivos con tipos y tamaños personalizados

Demostración de la carga de archivos con restricciones de tipos de archivos y tamaños, y mensajes personalizados.

import React from "react";
import { FileUpload } from "@firecms/ui";

export default function FileUploadCustomDemo() {
    const onFilesAdded = (files: File[]) => {
        console.log("Files added", files);
    };

    const onFilesRejected = (fileRejections) => {
        fileRejections.forEach(({ file, errors }) => {
            console.error(`File ${file.name} was rejected:`, errors);
        });
    };

    return (
        <FileUpload
            size={"large"}
            accept={{ "image/*": ["png", "jpg"] }}
            onFilesAdded={onFilesAdded}
            onFilesRejected={onFilesRejected}
            maxSize={5000000} // 5MB
            title="Upload Image"
            uploadDescription="Only JPG and PNG files are accepted (Max size: 5MB)"
        />
    );
}

Subida de archivos deshabilitada

Ilustrando cómo deshabilitar la funcionalidad de subida de archivos.

import React from "react";
import { FileUpload } from "@firecms/ui";

export default function FileUploadDisabledDemo() {
    return (
        <FileUpload
            size={"large"}
            accept={{ "image/*": [] }}
            onFilesAdded={() => {}}
            title="Upload Disabled"
            uploadDescription="File uploading is disabled"
            disabled={true}
        />
    );
}