Caricamento file

Il componente File Upload è progettato per gestire facilmente il trascinamento dei file e la selezione tramite finestra di dialogo. Supporta funzionalità come restrizione del tipo di file, dimensione massima, titoli e descrizioni personalizzate.

Utilizzo

Per usare il FileUpload, importalo dai tuoi componenti e passa le prop necessarie tra cui accept, onFilesAdded e, opzionalmente, onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, preventDropOnDocument e size.

Upload file di base

Un esempio semplice di upload file con configurazione minima.

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 con tipi e dimensioni personalizzati

Dimostrazione di upload file con restrizioni su tipi e dimensioni di file e messaggi personalizzati.

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 file disabilitato

Illustrazione di come disabilitare la funzionalità di upload file.

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