FodAttachments

A document upload component for managing file attachments with requirements validation. Supports multiple document types, file size limits, format restrictions, and preview functionality.

Basic Usage

Upload documents with defined requirements. Required documents must be uploaded before form submission.

ID Card / Passport (required)

Upload a clear copy of your ID card or passport

Attach document in PDF, JPG, JPEG, PNG format, maximum size 5 MB

Proof of Address (required)

Utility bill or bank statement from the last 3 months

Attach document in PDF, JPG, JPEG, PNG format, maximum size 5 MB

razor
<FodAttachments
    Documents="@_documents"
    OnDocumentUploaded="@HandleDocumentUploaded"
    OnDocumentRemoved="@HandleDocumentRemoved"
    MaxConcurrentUploads="2"
    ShowPreview="true" />

@code {
    private List<DocumentRequirement> _documents =
    [
        new DocumentRequirement
        {
            Id = "id-card",
            Name = "ID Card / Passport",
            Description = "Upload a clear copy of your ID",
            IsRequired = true,
            AcceptedFormats = ".pdf,.jpg,.jpeg,.png",
            MaxFileSize = 5 * 1024 * 1024
        }
    ];

    private void HandleDocumentUploaded(DocumentUploadedEventArgs args)
    {
        Console.WriteLine($"Uploaded: {args.FileName}");
    }
}

Required vs Optional Documents

Documents can be marked as required or optional. Required documents show a validation indicator.

Passport Photo (required)

Recent passport-style photograph

Attach document in JPG, JPEG, PNG format, maximum size 2 MB

CV / Resume(optional)

Your curriculum vitae (optional)

Attach document in PDF, DOC, DOCX format, maximum size 10 MB

Cover Letter(optional)

Optional cover letter

Attach document in PDF, DOC, DOCX format, maximum size 5 MB

razor
private List<DocumentRequirement> _documents =
[
    new DocumentRequirement
    {
        Id = "passport-photo",
        Name = "Passport Photo",
        IsRequired = true,  // Required - must be uploaded
        AcceptedFormats = ".jpg,.jpeg,.png"
    },
    new DocumentRequirement
    {
        Id = "cv-resume",
        Name = "CV / Resume",
        IsRequired = false,  // Optional - can be skipped
        AcceptedFormats = ".pdf,.doc,.docx"
    }
];

File Format Restrictions

Restrict accepted file formats per document type. Users can only upload files matching the specified extensions.

Photo (Images Only) (required)

Only JPG, JPEG, PNG allowed

Attach document in JPG, JPEG, PNG format, maximum size 5 MB

Document (PDF Only) (required)

Only PDF files allowed

Attach document in PDF format, maximum size 10 MB

razor
new DocumentRequirement
{
    Id = "photo-only",
    Name = "Photo (Images Only)",
    AcceptedFormats = ".jpg,.jpeg,.png",  // Only images
    MaxFileSize = 5 * 1024 * 1024  // 5 MB limit
},
new DocumentRequirement
{
    Id = "pdf-only",
    Name = "Document (PDF Only)",
    AcceptedFormats = ".pdf",  // Only PDF
    MaxFileSize = 10 * 1024 * 1024  // 10 MB limit
}

API Reference

Properties available on the FodAttachments component.

No properties defined.

DocumentRequirement Model

Configuration options for document requirements.

No properties defined.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.