Forms

File drop zone

Drag files in or browse, with type and size checks and a list of chosen files.

import { FileDropzone, FileList } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Resume upload

Drop your resume here

PDF or resume.json, up to 5 MB

file-dropzone/resume.tsx

'use client';

import { FileDropzone, FileList, Stack } from '@jsonresume/ui';
import { useState } from 'react';

export default function FileDropzoneResume() {
  const [files, setFiles] = useState<File[]>([]);
  return (
    <Stack gap={3}>
      <FileDropzone
        accept=".pdf,.json"
        maxSize={5 * 1024 * 1024}
        title="Drop your resume here"
        hint="PDF or resume.json, up to 5 MB"
        onFiles={(incoming) => setFiles(incoming)}
      />
      <FileList
        files={files}
        onRemove={(f) => setFiles((all) => all.filter((x) => x !== f))}
      />
    </Stack>
  );
}

Accessibility

Browsing uses a real button, so the drop area is never the only way in.
Rejected files are explained in an alert.

Props

Also accepts the attributes of the element FileDropzone renders.
Prop	Type	Default	Description
onFiles required	(files: File[]) => void	–
accept	string	–	e.g. ".pdf,.json" or "application/pdf"
browseLabel	string	Choose file
disabled	boolean	false
hint	ReactNode	–
maxSize	number	–	Largest allowed file, in bytes.
multiple	boolean	false
title	ReactNode	Drop a file here

Also accepts the attributes of the element FileList renders.
Prop	Type	Default	Description
files required	File[]	–
onRemove	((file: File) => void)	–