FileUpload

Usage

import { FileUpload } from "@devvy-ui/react";

<FileUpload label="Project files" name="files" multiple accept=".txt,image/*" onFilesChange={setFiles} />

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
maxSize	number	10485760	Per-file byte limit.
maxFiles	number	10	Maximum count when multiple is set.
onFilesChange	(files: File[]) => void	—	Accepted selection or reset.
onReject	(message: string) => void	—	Validation feedback.

Source ownership

Run npx @devvy-ui/cli init once in your React project, then add the source:

npx @devvy-ui/cli add file-upload

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

FileUpload.tsxREACT / TSX

import { forwardRef, useId, useRef, useState, type InputHTMLAttributes } from 'react';
import { useReset } from '../lib/widgets';
export interface FileUploadProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> {
  label: string;
  maxSize?: number;
  maxFiles?: number;
  onFilesChange?: (files: File[]) => void;
  onReject?: (message: string) => void;
}
export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(function FileUpload(
  {
    label,
    maxSize = 10 * 1024 * 1024,
    maxFiles = 10,
    onFilesChange,
    onReject,
    className,
    ...props
  },
  ref,
) {
  const [files, setFiles] = useState<File[]>([]),
    [error, setError] = useState(''),
    id = useId(),
    input = useRef<HTMLInputElement>(null);
  useReset(input, () => {
    setFiles([]);
    setError('');
    onFilesChange?.([]);
  });
  return (
    <div className="dvy-file-upload">
      <label htmlFor={props.id ?? id}>{label}</label>
      <input
        {...props}
        id={props.id ?? id}
        ref={(node) => {
          input.current = node;
          if (typeof ref === 'function') ref(node);
          else if (ref) ref.current = node;
        }}
        type="file"
        className={['dvy-file-input', className].filter(Boolean).join(' ')}
        aria-describedby={
          [props['aria-describedby'], error ? id + '-error' : undefined]
            .filter(Boolean)
            .join(' ') || undefined
        }
        aria-invalid={!!error || undefined}
        onChange={(event) => {
          const chosen = Array.from(event.target.files ?? []),
            types =
              props.accept
                ?.split(',')
                .map((v) => v.trim().toLowerCase())
                .filter(Boolean) ?? [];
          const invalid =
            chosen.length > (props.multiple ? maxFiles : 1) ||
            chosen.some(
              (file) =>
                file.size > maxSize ||
                (types.length &&
                  !types.some((type) =>
                    type.startsWith('.')
                      ? file.name.toLowerCase().endsWith(type)
                      : type.endsWith('/*')
                        ? file.type.startsWith(type.slice(0, -1))
                        : file.type === type,
                  )),
            );
          if (invalid) {
            const message =
              'Choose ' +
              (props.multiple ? 'up to ' + maxFiles + ' files' : 'one file') +
              ' matching the allowed types, each under ' +
              Math.round(maxSize / 1024) +
              ' KB.';
            setError(message);
            setFiles([]);
            event.target.value = '';
            onFilesChange?.([]);
            onReject?.(message);
            return;
          }
          setFiles(chosen);
          setError('');
          onFilesChange?.(chosen);
        }}
      />
      <p role="status" id={id + '-error'} className="dvy-field-error">
        {error}
      </p>
      {!!files.length && (
        <ul aria-label="Selected files">
          {files.map((file, i) => (
            <li key={file.name + '-' + i}>
              {file.name} · {Math.ceil(file.size / 1024)} KB
            </li>
          ))}
        </ul>
      )}
    </div>
  );
});

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Interactive preview

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.