File

1
import {
2
  FileContent,
3
  FileDescription,
4
  FileError,
5
  FileField,
6
  FileIcon,
7
  FileInput,
8
  FileList,
9
  FileLoader,
10
  FileProvider,
11
  FileSubmit,
12
  FileTitle,
13
} from "@/components/ui/file";
14
 
15
export default function FileDemo() {
16
  const providerId = "demoId";
17
 
18
  return (
19
    <FileProvider
20
      providerId={providerId}
21
      accept={[
22
        "image/webp",
23
        "image/jpeg",
24
        "image/png",
25
        "image/heic",
26
        "image/heif",
27
      ]}
28
      maxFiles={1} // the max files the user can upload
29
      maxSize={1024 * 1024} // the max size of a file in bytes
30
    >
31
      <FileInput className="w-full" providerId={providerId}>
32
        <FileField>
33
          <FileContent>
34
            <FileIcon>
35
              <ArrowUpFromLine />
36
            </FileIcon>
37
            <FileTitle>Upload your files here</FileTitle>
38
            <FileDescription>
39
              Image files that are smaller than 1 MB
40
            </FileDescription>
41
          </FileContent>
42
          <FileLoader>Uploading...</FileLoader>
43
        </FileField>
44
        <FileList />
45
        <FileError className="w-full text-left" />
46
        <FileSubmit>Upload</FileSubmit>
47
      </FileInput>
48
    </FileProvider>
49
  );
50
}