Téléversement de fichier

Le composant de téléversement de fichier est conçu pour gérer facilement le glisser-déposer de fichiers ainsi que la sélection de fichiers via la fenêtre de dialogue. Il supporte des fonctionnalités comme la restriction du type de fichier, la taille maximale de fichier, les titres et descriptions personnalisés.

Utilisation

Pour utiliser FileUpload, importez-le depuis vos composants et passez les props nécessaires incluant accept, onFilesAdded et optionnellement onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription.

Téléversement de fichier de base

Un exemple simple de téléversement de fichier avec une configuration minimale.

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

Téléversement avec types et tailles personnalisés

Démontrant le téléversement de fichier avec des restrictions sur les types et tailles de fichiers, et des messages personnalisés.

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

Téléversement désactivé

Illustration de la façon de désactiver la fonctionnalité de téléversement de fichier.

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