FileUpload

FileUpload offers an easy ways of dealing with files. It allows specifying rules for types, dimensions and max size.

This is it's interface

interface FileUploadProps {
        children: React.ReactNode;
        className?: string;
        allowedTypes?: string[];
        maxSize?: number;
        dimensions?: string;
        onFileSelect: (file: File) => void;
        onValidationError?: (error: string) => void;
        disabled?: boolean;
      }

Example usage:

<FileUpload
    onFileSelect={(file) => handleLogoChange(file)}
    allowedTypes={["image/png", "image/jpg"]}
    onValidationError={(err) => {
      toast.error(err);
    }}
    disabled={!user?.roles.includes(Role.ORG_ADMIN)}
  >
    <Avatar className="w-16 h-16">
      <AvatarImage src={form.getValues()["logoUrl"]} />
      <AvatarFallback>
        {form.getValues()["name"].substring(0, 1)}
      </AvatarFallback>
    </Avatar>
  </FileUpload>

LINKSHome Documentation Pricing Tutorials

LEGALTerms of Service Privacy policy