Datei-Upload (FileUpload)

Die File Upload-Komponente ist dafür konzipiert, das einfache Drag-and-Drop von Dateien sowie die Dateiauswahl über das Dialogfenster zu handhaben. Sie unterstützt Funktionen wie Einschränkung des Dateityps, maximale Dateigröße, benutzerdefinierte Titel und Beschreibungen.

Verwendung

Um FileUpload zu verwenden, importieren Sie es aus Ihren Komponenten und übergeben Sie die erforderlichen Props einschließlich accept, onFilesAdded und optional onFilesRejected, maxSize, disabled, maxFiles, title, uploadDescription, preventDropOnDocument und size.

Einfacher Datei-Upload

Ein einfaches Datei-Upload-Beispiel mit minimaler Konfiguration.

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

Datei-Upload mit benutzerdefinierten Typen und Größen

Demonstriert den Datei-Upload mit Einschränkungen bei Dateitypen und -größen sowie benutzerdefinierten Nachrichten.

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

Deaktivierter Datei-Upload

Veranschaulicht, wie die Datei-Upload-Funktion deaktiviert wird.

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