File Upload

1"use client";23import { useId, useRef, useState } from "react";4import { Button } from "@/components/ui/button";5import { cn } from "@/lib/utils";67type FileUpload01Props = {8  className?: string;9};1011type SelectedFile = {12  id: string;13  file: File;14};1516function formatSize(bytes: number) {17  if (bytes < 1024) return `${bytes} B`;18  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;19  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;20}2122function UploadIcon({ className }: { className?: string }) {23  return (24    <svg25      viewBox="0 0 24 24"26      fill="none"27      stroke="currentColor"28      strokeWidth="2"29      strokeLinecap="round"30      strokeLinejoin="round"31      aria-hidden="true"32      className={className}33    >34      <path d="M12 16V6" />35      <path d="m8 10 4-4 4 4" />36      <path d="M20 16.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1.5" />37    </svg>38  );39}4041function FileIcon({ className }: { className?: string }) {42  return (43    <svg44      viewBox="0 0 24 24"45      fill="none"46      stroke="currentColor"47      strokeWidth="2"48      strokeLinecap="round"49      strokeLinejoin="round"50      aria-hidden="true"51      className={className}52    >53      <path d="M14 3v4a1 1 0 0 0 1 1h4" />54      <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z" />55    </svg>56  );57}5859export function FileUpload01({ className }: FileUpload01Props) {60  const inputId = useId();61  const inputRef = useRef<HTMLInputElement>(null);62  const [dragging, setDragging] = useState(false);63  const [files, setFiles] = useState<SelectedFile[]>([]);6465  function addFiles(list: FileList | File[]) {66    const next = Array.from(list).map((file) => ({67      id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,68      file,69    }));70    setFiles((current) => [...current, ...next]);71  }7273  return (74    <section className={cn("@container w-full bg-background", className)}>75      <div className="mx-auto w-full max-w-xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">76        <div className="text-center">77          <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">78            Upload files79          </h2>80          <p className="mt-2 text-sm tracking-wide text-muted-foreground">81            Drop files here or browse from your device.82          </p>83        </div>8485        <label86          htmlFor={inputId}87          onDragEnter={(event) => {88            event.preventDefault();89            setDragging(true);90          }}91          onDragOver={(event) => {92            event.preventDefault();93            setDragging(true);94          }}95          onDragLeave={(event) => {96            event.preventDefault();97            setDragging(false);98          }}99          onDrop={(event) => {100            event.preventDefault();101            setDragging(false);102            if (event.dataTransfer.files.length) {103              addFiles(event.dataTransfer.files);104            }105          }}106          className={cn(107            "mt-8 flex cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-border px-6 py-12 transition-colors",108            dragging && "border-foreground bg-muted",109          )}110        >111          <span className="flex size-10 items-center justify-center text-muted-foreground [&_svg]:size-5">112            <UploadIcon />113          </span>114          <div className="text-center">115            <p className="text-sm font-medium tracking-wide text-foreground">116              Drag and drop files117            </p>118            <p className="mt-1 text-sm tracking-wide text-muted-foreground">119              PNG, JPG, PDF up to 10MB120            </p>121          </div>122          <Button123            type="button"124            size="sm"125            variant="secondary"126            onClick={(event) => {127              event.preventDefault();128              inputRef.current?.click();129            }}130          >131            Browse files132          </Button>133          <input134            ref={inputRef}135            id={inputId}136            type="file"137            multiple138            className="sr-only"139            onChange={(event) => {140              if (event.target.files?.length) {141                addFiles(event.target.files);142                event.target.value = "";143              }144            }}145          />146        </label>147148        {files.length > 0 ? (149          <ul className="mt-4 flex flex-col gap-2">150            {files.map((item) => (151              <li152                key={item.id}153                className="flex items-center gap-3 rounded-xl bg-muted px-3 py-2.5"154              >155                <span className="flex size-8 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">156                  <FileIcon />157                </span>158                <div className="min-w-0 flex-1">159                  <p className="truncate text-sm font-medium tracking-wide text-foreground">160                    {item.file.name}161                  </p>162                  <p className="text-xs tracking-wide text-muted-foreground tabular-nums">163                    {formatSize(item.file.size)}164                  </p>165                </div>166                <button167                  type="button"168                  className="shrink-0 text-xs tracking-wide text-muted-foreground"169                  onClick={() =>170                    setFiles((current) =>171                      current.filter((file) => file.id !== item.id),172                    )173                  }174                >175                  Remove176                </button>177              </li>178            ))}179          </ul>180        ) : null}181      </div>182    </section>183  );184}

1"use client";23import { useEffect, useId, useRef, useState } from "react";4import { Button } from "@/components/ui/button";5import { Progress, ProgressValue } from "@/components/ui/progress";6import { cn } from "@/lib/utils";78type FileUpload02Props = {9  className?: string;10};1112type QueueFile = {13  id: string;14  name: string;15  size: number;16  progress: number;17};1819function formatSize(bytes: number) {20  if (bytes < 1024) return `${bytes} B`;21  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;22  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;23}2425function FileIcon({ className }: { className?: string }) {26  return (27    <svg28      viewBox="0 0 24 24"29      fill="none"30      stroke="currentColor"31      strokeWidth="2"32      strokeLinecap="round"33      strokeLinejoin="round"34      aria-hidden="true"35      className={className}36    >37      <path d="M14 3v4a1 1 0 0 0 1 1h4" />38      <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2Z" />39    </svg>40  );41}4243function UploadIcon({ className }: { className?: string }) {44  return (45    <svg46      viewBox="0 0 24 24"47      fill="none"48      stroke="currentColor"49      strokeWidth="2"50      strokeLinecap="round"51      strokeLinejoin="round"52      aria-hidden="true"53      className={className}54    >55      <path d="M12 16V6" />56      <path d="m8 10 4-4 4 4" />57      <path d="M20 16.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1.5" />58    </svg>59  );60}6162export function FileUpload02({ className }: FileUpload02Props) {63  const inputId = useId();64  const inputRef = useRef<HTMLInputElement>(null);65  const [dragging, setDragging] = useState(false);66  const [files, setFiles] = useState<QueueFile[]>([]);6768  function addFiles(list: FileList | File[]) {69    const next = Array.from(list).map((file) => ({70      id: `${file.name}-${file.size}-${file.lastModified}-${Math.random()}`,71      name: file.name,72      size: file.size,73      progress: 8 + Math.round(Math.random() * 12),74    }));75    setFiles((current) => [...current, ...next]);76  }7778  const hasPending = files.some((file) => file.progress < 100);7980  useEffect(() => {81    if (!hasPending) return;8283    const timer = window.setInterval(() => {84      setFiles((current) =>85        current.map((file) => {86          if (file.progress >= 100) return file;87          const step = 4 + Math.round(Math.random() * 10);88          return {89            ...file,90            progress: Math.min(100, file.progress + step),91          };92        }),93      );94    }, 280);9596    return () => window.clearInterval(timer);97  }, [hasPending]);9899  return (100    <section className={cn("@container w-full bg-background", className)}>101      <div className="mx-auto w-full max-w-xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">102        <div className="flex flex-wrap items-end justify-between gap-3">103          <div>104            <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">105              Attachments106            </h2>107            <p className="mt-2 text-sm tracking-wide text-muted-foreground">108              Upload docs and media. Progress updates as files process.109            </p>110          </div>111          <Button112            type="button"113            size="sm"114            onClick={() => inputRef.current?.click()}115          >116            Add files117          </Button>118          <input119            ref={inputRef}120            id={inputId}121            type="file"122            multiple123            className="sr-only"124            onChange={(event) => {125              if (event.target.files?.length) {126                addFiles(event.target.files);127                event.target.value = "";128              }129            }}130          />131        </div>132133        <label134          htmlFor={inputId}135          onDragEnter={(event) => {136            event.preventDefault();137            setDragging(true);138          }}139          onDragOver={(event) => {140            event.preventDefault();141            setDragging(true);142          }}143          onDragLeave={(event) => {144            event.preventDefault();145            setDragging(false);146          }}147          onDrop={(event) => {148            event.preventDefault();149            setDragging(false);150            if (event.dataTransfer.files.length) {151              addFiles(event.dataTransfer.files);152            }153          }}154          className={cn(155            "mt-6 flex cursor-pointer items-center gap-3 rounded-xl border border-dashed border-border px-4 py-4 transition-colors",156            dragging && "border-foreground bg-muted",157          )}158        >159          <span className="flex size-9 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">160            <UploadIcon />161          </span>162          <div className="min-w-0">163            <p className="text-sm font-medium tracking-wide text-foreground">164              Drop files to upload165            </p>166            <p className="text-sm tracking-wide text-muted-foreground">167              Or click Add files — max 25MB each168            </p>169          </div>170        </label>171172        {files.length > 0 ? (173          <ul className="mt-4 flex flex-col gap-3">174            {files.map((file) => (175              <li key={file.id} className="rounded-xl bg-muted px-4 py-3">176                <div className="flex items-start gap-3">177                  <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4">178                    <FileIcon />179                  </span>180                  <div className="min-w-0 flex-1">181                    <div className="flex items-baseline justify-between gap-3">182                      <p className="truncate text-sm font-medium tracking-wide text-foreground">183                        {file.name}184                      </p>185                      <div className="flex shrink-0 items-center gap-2">186                        <p className="text-xs tracking-wide text-muted-foreground tabular-nums">187                          {formatSize(file.size)}188                        </p>189                        <button190                          type="button"191                          className="text-xs tracking-wide text-muted-foreground"192                          onClick={() =>193                            setFiles((current) =>194                              current.filter((item) => item.id !== file.id),195                            )196                          }197                        >198                          Remove199                        </button>200                      </div>201                    </div>202                    {file.progress >= 100 ? (203                      <p className="mt-2 text-xs tracking-wide text-muted-foreground">204                        Uploaded205                      </p>206                    ) : (207                      <Progress value={file.progress} className="mt-2">208                        <ProgressValue className="text-xs" />209                      </Progress>210                    )}211                  </div>212                </div>213              </li>214            ))}215          </ul>216        ) : null}217      </div>218    </section>219  );220}

1"use client";23import { useEffect, useId, useRef, useState } from "react";4import { Button } from "@/components/ui/button";5import { cn } from "@/lib/utils";67type FileUpload03Props = {8  className?: string;9};1011type Slot = {12  id: string;13  label: string;14  src: string | null;15};1617const initialSlots: Slot[] = [18  { id: "cover", label: "Cover", src: null },19  { id: "shot-1", label: "Shot 1", src: null },20  { id: "shot-2", label: "Shot 2", src: null },21  { id: "shot-3", label: "Shot 3", src: null },22];2324function ImageIcon({ className }: { className?: string }) {25  return (26    <svg27      viewBox="0 0 24 24"28      fill="none"29      stroke="currentColor"30      strokeWidth="2"31      strokeLinecap="round"32      strokeLinejoin="round"33      aria-hidden="true"34      className={className}35    >36      <rect x="3" y="3" width="18" height="18" rx="2" />37      <circle cx="9" cy="9" r="1.5" />38      <path d="m21 15-3.5-3.5a2 2 0 0 0-2.8 0L6 20" />39    </svg>40  );41}4243function PlusIcon({ className }: { className?: string }) {44  return (45    <svg46      viewBox="0 0 24 24"47      fill="none"48      stroke="currentColor"49      strokeWidth="2"50      strokeLinecap="round"51      strokeLinejoin="round"52      aria-hidden="true"53      className={className}54    >55      <path d="M12 5v14" />56      <path d="M5 12h14" />57    </svg>58  );59}6061function CloseIcon({ className }: { className?: string }) {62  return (63    <svg64      viewBox="0 0 24 24"65      fill="none"66      stroke="currentColor"67      strokeWidth="2"68      strokeLinecap="round"69      strokeLinejoin="round"70      aria-hidden="true"71      className={className}72    >73      <path d="M18 6 6 18" />74      <path d="m6 6 12 12" />75    </svg>76  );77}7879export function FileUpload03({ className }: FileUpload03Props) {80  const inputId = useId();81  const inputRef = useRef<HTMLInputElement>(null);82  const activeSlotRef = useRef<string | null>(null);83  const slotsRef = useRef<Slot[]>(initialSlots);84  const [slots, setSlots] = useState<Slot[]>(initialSlots);85  slotsRef.current = slots;8687  useEffect(() => {88    return () => {89      for (const slot of slotsRef.current) {90        if (slot.src) URL.revokeObjectURL(slot.src);91      }92    };93  }, []);9495  function openPicker(slotId?: string) {96    activeSlotRef.current = slotId ?? null;97    inputRef.current?.click();98  }99100  function assignImages(list: FileList) {101    const images = Array.from(list).filter((file) =>102      file.type.startsWith("image/"),103    );104    if (!images.length) return;105106    setSlots((current) => {107      const next = current.map((slot) => ({ ...slot }));108      const urls = images.map((file) => URL.createObjectURL(file));109110      if (activeSlotRef.current) {111        const index = next.findIndex(112          (slot) => slot.id === activeSlotRef.current,113        );114        if (index >= 0) {115          if (next[index].src) URL.revokeObjectURL(next[index].src);116          next[index] = { ...next[index], src: urls[0] };117          for (const url of urls.slice(1)) URL.revokeObjectURL(url);118          return next;119        }120      }121122      let urlIndex = 0;123      for (let i = 0; i < next.length && urlIndex < urls.length; i += 1) {124        if (!next[i].src) {125          next[i] = { ...next[i], src: urls[urlIndex] };126          urlIndex += 1;127        }128      }129      for (const url of urls.slice(urlIndex)) URL.revokeObjectURL(url);130      return next;131    });132133    activeSlotRef.current = null;134  }135136  function clearSlot(slotId: string) {137    setSlots((current) =>138      current.map((slot) => {139        if (slot.id !== slotId) return slot;140        if (slot.src) URL.revokeObjectURL(slot.src);141        return { ...slot, src: null };142      }),143    );144  }145146  return (147    <section className={cn("@container w-full bg-background", className)}>148      <div className="mx-auto w-full max-w-2xl px-4 py-10 @[32rem]:px-6 @[32rem]:py-14">149        <div className="flex flex-wrap items-end justify-between gap-3">150          <div>151            <h2 className="text-xl font-medium tracking-wide text-foreground @[32rem]:text-2xl">152              Project gallery153            </h2>154            <p className="mt-2 text-sm tracking-wide text-muted-foreground">155              Add a cover and supporting shots. JPG or PNG, up to 5MB.156            </p>157          </div>158          <Button159            type="button"160            size="sm"161            variant="secondary"162            onClick={() => openPicker()}163          >164            Upload images165          </Button>166          <input167            ref={inputRef}168            id={inputId}169            type="file"170            accept="image/*"171            multiple172            className="sr-only"173            onChange={(event) => {174              if (event.target.files?.length) {175                assignImages(event.target.files);176                event.target.value = "";177              }178            }}179          />180        </div>181182        <div className="mt-6 grid grid-cols-2 gap-3 @[40rem]:grid-cols-4">183          {slots.map((slot) =>184            slot.src ? (185              <div186                key={slot.id}187                className="relative aspect-square overflow-hidden rounded-xl bg-muted"188              >189                <img190                  src={slot.src}191                  alt={slot.label}192                  className="size-full object-cover"193                />194                <button195                  type="button"196                  aria-label={`Remove ${slot.label}`}197                  onClick={() => clearSlot(slot.id)}198                  className="absolute top-2 right-2 flex size-6 items-center justify-center rounded-full bg-background text-foreground [&_svg]:size-3.5"199                >200                  <CloseIcon />201                </button>202              </div>203            ) : (204              <button205                key={slot.id}206                type="button"207                onClick={() => openPicker(slot.id)}208                className="flex aspect-square flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border text-muted-foreground"209              >210                <span className="[&_svg]:size-5">211                  <PlusIcon />212                </span>213                <span className="text-xs tracking-wide">{slot.label}</span>214              </button>215            ),216          )}217        </div>218219        <p className="mt-4 flex items-center gap-2 text-xs tracking-wide text-muted-foreground">220          <span className="[&_svg]:size-3.5">221            <ImageIcon />222          </span>223          Cover is shown first in the public gallery.224        </p>225      </div>226    </section>227  );228}