Upload de arquivo

O componente File Upload é projetado para lidar facilmente com arrastar e soltar arquivos, bem como seleção de arquivos pela janela de diálogo. Suporta recursos como restrição de tipo de arquivo, tamanho máximo de arquivo, títulos e descrições personalizadas.

Uso

Para usar o FileUpload, importe-o dos seus componentes e passe as props necessárias incluindo accept, onFilesAdded e, opcionalmente, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, preventDropOnDocument e size.

Upload de arquivo básico

Um exemplo simples de upload de arquivo com configuração 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"
        />
    );
}

Upload com tipos e tamanhos personalizados

Demonstrando upload de arquivo com restrições de tipos e tamanhos de arquivo, e mensagens personalizadas.

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)"
        />
    );
}

Upload de arquivo desabilitado

Ilustrando como desabilitar a funcionalidade de upload de arquivo.

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}
        />
    );
}