Dropzone | Pol-ui - A beautiful and functional UI library for React and Next.js

The Dropzone displays a box where the user can drag and drop files to upload them. It also allows the user to click on the box to open the file explorer and select files to upload.

Importation

Import the component from pol-ui to use the Timeline element:

import { Timeline } from "pol-ui";

Default Timeline

import { Dropzone, FileList} from "pol-ui";
import React,{useState} from "react";
 
const DropzoneComponent = () => {
  const [files, setFiles] = useState<File[]>([])
  // Create handler for dropzone's onFilesDrop:
  const onFilesDrop = useCallback(
    (newFiles: File[]) => {
      setFiles([...files, ...newFiles])
    },
    [files],
  )
 
  return (
    <Dropzone onFilesDrop={onFilesDrop}>
      <h2>Drop your files here</h2>
 
      {files.length === 0 ? <h3>No files to upload</h3> : <h3>Files to upload: {files.length}</h3>}
 
      {/* Render the file list */}
      <FileList files={files} setFiles={setFiles} />
    </Dropzone>
  )
};
export default DropzoneComponent;

Props

Prop name	Type	Default	Description
onDragStateChange	(isDragActive: boolean) => void	-	Called when the drag state changes.
onDrag	() => void	-	Called when the user drags a file over the dropzone.
onDragIn	() => void	-	Called when the user drags a file into the dropzone.
onDragOut	() => void	-	Called when the user drags a file out of the dropzone.
onDrop	(e: DragEvent) => void	-	Called when the user drops a file into the dropzone.
onFilesDrop	(files: File[]) => void	-	Called when the user drops a file into the dropzone.
multiple	boolean	true	Whether the dropzone should accept multiple files.
accept	string	-	A string that specifies the types of files that the dropzone should accept.
disabled	boolean	false	Whether the dropzone is disabled.
className	string	-	A string that specifies the class name of the dropzone.
disabledClassName	string	-	A string that specifies the class name of the dropzone when it is disabled.
activeClassName	string	-	A string that specifies the class name of the dropzone when it is active.
theme	DropzoneTheme	-	An object that specifies the theme of the dropzone.

Examples

Single file

import { Dropzone, FileList} from "pol-ui";
import React,{useState} from "react";
 
const DropzoneComponent = () => {
  const [files, setFiles] = useState<File[]>([])
  // Create handler for dropzone's onFilesDrop:
  const onFilesDrop = useCallback(
    (newFiles: File[]) => {
      setFiles([...files, ...newFiles])
    },
    [files],
  )
 
  return (
     <Dropzone onFilesDrop={onFilesDrop} multiple={false}>
      <h2>You can only take 1 file as MULTIPLE is setted to false</h2>
      <FileList files={files} setFiles={setFiles} />
    </Dropzone>
  )
};
export default DropzoneComponent;

Custom class

custom-class file

import { Dropzone, FileList} from "pol-ui";
import React,{useState} from "react";
 
const DropzoneComponent = () => {
  const [files, setFiles] = useState<File[]>([])
  // Create handler for dropzone's onFilesDrop:
  const onFilesDrop = useCallback(
    (newFiles: File[]) => {
      setFiles([...files, ...newFiles])
    },
    [files],
  )
 
    return (
    <div className="flex flex-col gap-4 w-full">
      <Dropzone onFilesDrop={onFilesDrop} className="bg-lime-200 w-full rounded-full border-lime-400 border-solid">
        <h2>Drop your files here</h2>
        {files.length === 0 ? <h3>No files to upload</h3> : <h3>Files to upload: {files.length}</h3>}
        <FileList files={files} setFiles={setFiles} />
      </Dropzone>
      <Dropzone
        onFilesDrop={onFilesDrop}
        className="bg-primary-200 border-sm border-none  h-[200px] flex justify-center items-center"
      >
        <h2>Drop your files here</h2>
        {files.length === 0 ? <h3>No files to upload</h3> : <h3>Files to upload: {files.length}</h3>}
        <FileList files={files} setFiles={setFiles} />
      </Dropzone>
      <Dropzone
        onFilesDrop={onFilesDrop}
        className="bg-transparent border border-neutral-400 border-solid"
        activeClassName="bg-neutral-200"
      >
        <h2>Drop your files here</h2>
        {files.length === 0 ? <h3>No files to upload</h3> : <h3>Files to upload: {files.length}</h3>}
        <FileList files={files} setFiles={setFiles} />
      </Dropzone>
      <Dropzone onFilesDrop={onFilesDrop} disabled>
        <h2>I am disabled!</h2>
        {files.length === 0 ? <h3>No files to upload</h3> : <h3>Files to upload: {files.length}</h3>}
        <FileList files={files} setFiles={setFiles} />
      </Dropzone>
    </div>
  )
};
export default DropzoneComponent;

Custom accepts

custom-accepts file

import { Dropzone, FileList} from "pol-ui";
import React,{useState} from "react";
 
const DropzoneComponent = () => {
  const [files, setFiles] = useState<File[]>([])
  // Create handler for dropzone's onFilesDrop:
  const onFilesDrop = useCallback(
    (newFiles: File[]) => {
      setFiles([...files, ...newFiles])
    },
    [files],
  )
 
  return (
       <Dropzone onFilesDrop={onFilesDrop} multiple={false} accept=".pdf">
      <h2>You can only import PDFs here</h2>
      <FileList files={files} setFiles={setFiles} />
    </Dropzone>
  )
};
export default DropzoneComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface DropzoneTheme {
  base: string;
  disabled: string;
  active: string;
}