Skip to main content

​
Overview

The FileUpload component provides file upload functionality with drag and drop support, progress tracking, and file management.

​
Basic Usage

import { FileUpload } from '@peppermint-design/devreadykit-custom';

export default function FileUploadBasic() {
  const handleFiles = (files) => {
    console.log('Files:', files);
  };

return (

<FileUpload.Root>
  <FileUpload.DropZone
    onDropFiles={handleFiles}
    title="Click to upload"
    subtitle="SVG, PNG, JPG or GIF (max. 800x400px)"
  />
</FileUpload.Root>
); }

​
With File List

import { FileUpload } from '@peppermint-design/devreadykit-custom';
import { useState } from 'react';

export default function FileUploadWithList() {
  const [files, setFiles] = useState([]);

  const handleFiles = (fileList) => {
    const newFiles = Array.from(fileList).map(file => ({
      id: Math.random().toString(),
      name: file.name,
      size: file.size,
      progress: 0
    }));
    setFiles([...files, ...newFiles]);
  };

  return (
    <FileUpload.Root>
      <FileUpload.DropZone onDropFiles={handleFiles} />
      <FileUpload.List files={files} />
    </FileUpload.Root>
  );
}

​
Single File

import { FileUpload } from '@peppermint-design/devreadykit-custom';

export default function FileUploadSingle() {
  const handleFiles = (files) => {
    console.log('File:', files[0]);
  };

return (

<FileUpload.Root>
  <FileUpload.DropZone
    onDropFiles={handleFiles}
    multiple={false}
    title="Upload single file"
  />
</FileUpload.Root>
); }

​
With Accept Types

import { FileUpload } from '@peppermint-design/devreadykit-custom';

export default function FileUploadWithAccept() {
  const handleFiles = (files) => {
    console.log('Files:', files);
  };

  return (
    <FileUpload.Root>
      <FileUpload.DropZone
        onDropFiles={handleFiles}
        accept="image/*"
        title="Upload images only"
      />
    </FileUpload.Root>
  );
}

​
Props