1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29

"use client";
import { FileUpload } from "@gunkin/uiify";

export default function Example() {
  return (
    <FileUpload.Root multiple maxFiles={3} maxSize={5000000} className="">
      <FileUpload.HiddenInput name="attachments" aria-label="Attachments" />
      <FileUpload.Trigger as="button" className="">
        Choose files
      </FileUpload.Trigger>
      <FileUpload.Dropzone className="">Drop files here</FileUpload.Dropzone>
      <FileUpload.List className="">
        {(files) =>
          files.map((file, index) => (
            <FileUpload.Item key={file.name} index={index} className="">
              <span className="">
                <strong>{file.name}</strong>
                <small className="">{(file.size / 1024).toFixed(1)} KB</small>
              </span>
              <FileUpload.ItemRemove index={index} className="" aria-label={"Remove " + file.name}>
                ×
              </FileUpload.ItemRemove>
            </FileUpload.Item>
          ))
        }
      </FileUpload.List>
    </FileUpload.Root>
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91

/* File upload — trigger button with dashed dropzone. */

@layer components {
  [data-uiify-file-upload] {
    display: grid;
    gap: var(--space-md);
    inline-size: 100%;
    max-inline-size: 24rem;
  }

  [data-uiify-file-upload] [data-part="dropzone"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 8rem;
    padding: var(--space-lg);
    border: 2px dashed var(--input);
    border-radius: var(--radius-xl);
    background-color: var(--secondary);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    text-align: center;
    transition: var(--transition-colors);
  }

  [data-uiify-file-upload] [data-part="dropzone"]:hover,
  [data-uiify-file-upload] [data-part="dropzone"][data-dragging] {
    border-color: var(--primary);
    background-color: color-mix(in oklch, var(--primary) 8%, transparent);
    color: var(--foreground);
  }

  [data-uiify-file-upload] [data-part="dropzone"][data-disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [data-uiify-file-upload] [data-part="list"] {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  [data-uiify-file-upload] [data-part="item"] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--card);
    font-size: var(--text-sm);
  }
}

@layer components {
  [data-uiify-file-upload] [data-part="file-info"] {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
    flex: 1;
    overflow-wrap: anywhere;
  }
  [data-uiify-file-upload] small {
    color: var(--muted-foreground);
  }
  [data-uiify-file-upload] [data-part="remove"] {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: 2rem;
    block-size: 2rem;
    margin-inline-start: auto;
    border: 0;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--foreground);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
  }
  [data-uiify-file-upload] [data-part="remove"]:hover {
    background: var(--accent);
  }
  [data-uiify-file-upload] [data-part="remove"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85

"use client";
import { FileUpload } from "@gunkin/uiify";

export default function Example() {
  return (
    <FileUpload.Root
      multiple
      maxFiles={3}
      maxSize={5000000}
      className="grid gap-md [inline-size:100%] [max-inline-size:24rem]"
    >
      <FileUpload.HiddenInput name="attachments" aria-label="Attachments" />
      <FileUpload.Trigger
        as="button"
        className={
          "relative isolate inline-flex items-center justify-center gap-1.5 min-h-10 min-w-10 px-5 py-px border-[len" +
          "gth:var(--border-width)] border-solid border-transparent rounded-full bg-clip-padding text-base font-medi" +
          "um leading-6 no-underline cursor-pointer [transition:var(--transition-colors)] focus-visible:[outline:non" +
          "e] focus-visible:[box-shadow:0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] d" +
          "isabled:opacity-50 disabled:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:cursor-not-allo" +
          "wed [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-rim:rgb(255_255_255_/" +
          "_20%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:[--uiify-button-wash:rgb(255_255_2" +
          "55_/_15%)] [&:is([data-selected],[aria-pressed=true],[aria-current=page])]:border-transparent [&:is([data" +
          "-selected],[aria-pressed=true],[aria-current=page])]:bg-primary [&:is([data-selected],[aria-pressed=true]" +
          ",[aria-current=page])]:text-primary-foreground [:checked+&]:[--uiify-button-rim:rgb(255_255_255_/_20%)] [" +
          ":checked+&]:[--uiify-button-wash:rgb(255_255_255_/_15%)] [:checked+&]:border-transparent [:checked+&]:bg-" +
          "primary [:checked+&]:text-primary-foreground [@media_(any-hover:_hover)_and_(any-pointer:_fine)]:[&:is([d" +
          "ata-selected],[aria-pressed=true],[aria-current=page]):hover:not(:disabled,[data-disabled])]:[background-" +
          "color:color-mix(in_oklch,_var(--primary)_88%,_var(--primary-foreground))] [@media_(any-hover:_hover)_and_" +
          "(any-pointer:_fine)]:[:checked:not(:disabled)+&:hover]:[background-color:color-mix(in_oklch,_var(--primar" +
          "y)_88%,_var(--primary-foreground))] bg-foreground text-background [@media_(any-hover:_hover)_and_(any-poi" +
          "nter:_fine)]:hover:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_oklch,_var(--foregro" +
          "und)_90%,_var(--background))] active:[&:not(:disabled,[data-disabled])]:[background-color:color-mix(in_ok" +
          "lch,_var(--foreground)_80%,_var(--background))]"
        }
      >
        Choose files
      </FileUpload.Trigger>
      <FileUpload.Dropzone
        className="
          flex items-center justify-center [min-block-size:8rem] p-lg [border-width:2px] [border-style:dashed]
          border-input rounded-xl bg-secondary text-muted-foreground text-sm text-center
          [transition:var(--transition-colors)] hover:border-primary
          hover:[background-color:color-mix(in_oklch,_var(--primary)_8%,_transparent)] hover:text-foreground
          data-[dragging]:border-primary
          data-[dragging]:[background-color:color-mix(in_oklch,_var(--primary)_8%,_transparent)]
          data-[dragging]:text-foreground data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed
        "
      >
        Drop files here
      </FileUpload.Dropzone>
      <FileUpload.List className="grid gap-xs m-0 p-0 list-none">
        {(files) =>
          files.map((file, index) => (
            <FileUpload.Item
              key={file.name}
              index={index}
              className="
                flex items-center gap-sm [padding:var(--space-sm)_var(--space-md)] border-[length:var(--border-width)]
                border-solid border-border rounded-lg bg-card text-sm
              "
            >
              <span className="grid [gap:0.25rem] [min-inline-size:0] [flex:1] [overflow-wrap:anywhere]">
                <strong>{file.name}</strong>
                <small className="text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</small>
              </span>
              <FileUpload.ItemRemove
                index={index}
                className="
                  grid place-items-center flex-none [inline-size:2rem] [block-size:2rem] [margin-inline-start:auto]
                  border-0 border-current border-none rounded-[50%] bg-secondary text-foreground [font-size:1.25rem]
                  leading-none cursor-pointer hover:bg-accent focus-visible:[outline:2px_solid_var(--ring)]
                  focus-visible:[outline-offset:2px]
                "
                aria-label={"Remove " + file.name}
              >
                ×
              </FileUpload.ItemRemove>
            </FileUpload.Item>
          ))
        }
      </FileUpload.List>
    </FileUpload.Root>
  );
}