Dropzone

import { Dropzone } from "@nexera-ui/react";

<Dropzone
  title="Drag files here or browse"
  description="PDF, JPG or PNG up to 10 MB"
  acceptedFileTypes={["application/pdf", "image/jpeg", "image/png"]}
/>;

import { Dropzone } from "@nexera-ui/react";

export function States() {
  return (
    <div className="flex flex-col gap-6">
      <Dropzone
        title="Drag files here or browse"
        description="PDF, JPG or PNG up to 10 MB"
        acceptedFileTypes={["application/pdf", "image/jpeg", "image/png"]}
        isInvalid
        errorMessage="Only PDF, JPG and PNG are allowed"
      />
      <Dropzone
        title="Drag files here or browse"
        description="PDF, JPG or PNG up to 10 MB"
        acceptedFileTypes={["application/pdf", "image/jpeg", "image/png"]}
        isDisabled
      />
      <Dropzone
        title="Drag files here or browse"
        description="PDF, JPG or PNG up to 10 MB"
        acceptedFileTypes={["application/pdf", "image/jpeg", "image/png"]}
        layout="compact"
        isInvalid
        errorMessage="Only PDF, JPG and PNG are allowed"
      />
    </div>
  );
}

import { useState } from "react";
import { Dropzone, FileItem } from "@nexera-ui/react";
import { LuFileText, LuImage } from "react-icons/lu";

export function WithFileList() {
  const [files, setFiles] = useState<File[]>([]);
  const [rejected, setRejected] = useState<string | null>(null);
  return (
    <div className="flex flex-col gap-4">
      <Dropzone
        title="Drag files here or browse"
        description="PDF, JPG or PNG up to 10 MB"
        acceptedFileTypes={["application/pdf", "image/jpeg", "image/png"]}
        isInvalid={rejected !== null}
        errorMessage={rejected === null ? undefined : `${rejected} is not a PDF, JPG or PNG file`}
        onSelect={(selected) => {
          setRejected(null);
          setFiles((current) => [...current, ...selected]);
        }}
        onReject={(list) => {
          setRejected(list.map((file) => file.name).join(", "));
        }}
      />
      {files.length > 0 ? (
        <ul className="m-0 flex list-none flex-col gap-3 p-0">
          {files.map((file, index) => (
            <li key={`${file.name}${String(index)}`}>
              <FileItem
                name={file.name}
                icon={file.type.startsWith("image/") ? <LuImage /> : <LuFileText />}
                status="complete"
                meta={`${String(Math.max(1, Math.round(file.size / 1024)))} KB  ·  uploaded`}
                onRemove={() => {
                  setFiles((current) => current.filter((_, i) => i !== index));
                }}
              />
            </li>
          ))}
        </ul>
      ) : null}
    </div>
  );
}

import { Dropzone } from "@nexera-ui/react";

export function LongTextAndRightToLeft() {
  return (
    <div className="flex flex-col gap-6">
      <Dropzone
        acceptedFileTypes={["application/pdf", "image/jpeg", "image/png"]}
        title="Drag your signed employment contract and identity documents here, or browse"
        description="PDF, JPG or PNG, up to 10 MB each. Scans must show all four corners of the document."
      />
      <div dir="rtl" lang="ar">
        <Dropzone
          layout="compact"
          title="اسحب الملفات هنا أو تصفح"
          description="PDF أو JPG أو PNG حتى 10 ميغابايت"
          browseLabel="تصفح الملفات"
          dropTitle="أفلت للرفع"
        />
      </div>
    </div>
  );
}