Seamless File Uploading Experience

Precision-crafted, React Dropzone component is a standout for drag-and-drop uploads. Lightweight and feature-rich, it's designed for both out-of-the-box elegance and personal customization.

~ npm install nebulazone --save

Customizable React Dropzone Component

Unleash the power of a sleek React Dropzone: feather-light, fully style-adaptable with built-in image viewing. Experience effortless file validation and a developer-friendly API for unmatched flexibility.

Quick Start

npm install @zbarakzai/dropzone

Neubulazone

Effortlessly integrate and test our Dropzone component, ensuring smooth file uploads in any React application.

import { DropZone } from "nebulazone";

function DropZoneExample() {
  const [files, setFiles] = useState<File[]>([]);

  const onDrop = useCallback(
    (
      files: File[],
      acceptedFiles: File[],
      rejectedFiles: File[],
      errors: ValidationError[],
    ) => {
      setFiles(acceptedFiles);
    },
    [],
  );

  return (
    <DropZone
      accept="image/*"
      className="relative border-dashed rounded-md"
      onDrop={onDrop}
    />
  );
}

First-class developer experience

Experience a top-tier React dropzone component: fully customizable, with built-in error handling and validation for file size and type.

import { DropZone } from 'nebulazone'
import { useCallback, useEffect, useRef, useState } from 'react'

export function WithGridLayout() {
  const [files, setFiles] = useState<File[]>([])
  const [error, setError] = useState<boolean>(false)
  const [dragEnter, setDragEnter] = useState<boolean>(false)
  const fileBoxRef = useRef<HTMLDivElement>(null)

  const onDropAccepted = useCallback(
    (acceptedFiles: File[]) =>
      setFiles((files) => [...files, ...acceptedFiles]),
    [],
  )

  useEffect(() => {
    const loadDefaultFiles = async () => {
      const defaultImagePaths = [
        '/images/react-dropzone.png',
        '/images/l-nebulla.png',
        '/images/logo.png',
        '/images/logo.png',
      ]

      const defaultFiles = await Promise.all(
        defaultImagePaths.map(async (path, index) => {
          const response = await fetch(path)
          const blob = await response.blob()
          return new File([blob], `image${index + 1}.jpg`, {
            type: 'image/jpeg',
          })
        }),
      )

      setFiles(defaultFiles)
    }
    loadDefaultFiles()
  }, [])

  const handleClick = (
    event: React.MouseEvent<HTMLElement>,
    inputRef: React.RefObject<HTMLInputElement>,
  ) => {
    if (
      fileBoxRef.current &&
      fileBoxRef.current.contains(event.target as Node)
    ) {
      inputRef.current?.click()
    }
  }

  const borderColor = error
    ? 'border-[#e84c85]'
    : dragEnter
    ? 'border-rabab-500'
    : 'border-tal-100'

  return (
    <div style={{ padding: '0' }}>
      <DropZone
        accept="image/*"
        className={`relative p-2 border-dashed rounded-md border-2 min-h-[150px] items-center flex justify-center cursor-pointer ${borderColor}`}
        onDropAccepted={onDropAccepted}
        setError={setError}
        setFileEnterZone={setDragEnter}
        onClick={handleClick}
      >
        {files.length > 0 && <FileGrid boxRef={fileBoxRef} files={files} />}
        {!error && dragEnter && <AcceptMarkupView />}
        {!error && !dragEnter && files.length === 0 && (
          <span className="text-sm text-tal-100">Drop file to upload</span>
        )}
      </DropZone>
    </div>
  )
}

function FileGrid({
  files,
  boxRef,
}: {
  files: File[]
  boxRef: React.RefObject<HTMLDivElement>
}) {
  return (
    <div className="grid grid-cols-4 gap-2 w-full">
      {files.map((file, i) => (
        <FilePreview file={file} index={i} key={file.name} />
      ))}
      <div
        ref={boxRef}
        className="border border-dashed border-rabab-500 min-[125px] min-w-[100px] flex justify-center items-center text-rabab-500 rounded-md"
      >
        Add File
      </div>
    </div>
  )
}

function FilePreview({ file, index }: { file: File; index: number }) {
  return (
    <div
      className={`${
        index === 0 ? 'col-start-1 col-span-2 row-start-1 row-span-2' : ''
      } border border-gray-300 rounded-lg p-1 ${
        index !== 0 ? 'max-h-[125px]' : ''
      }`}
    >
      <div className="relative flex items-center justify-center w-full h-full p-0 m-0">
        <DropZone.Preview
          file={file}
          allowCrop={true}
          imageCropAspectRatio="1:1"
          key={`${file.name}-${index}`}
        />
      </div>
    </div>
  )
}

const CatchIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    strokeWidth={1.5}
    stroke="currentColor"
    className="w-6 h-6 text-rabab-500"
  >
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"
    />
  </svg>
)

const AcceptMarkupView = () => (
  <div
    className="absolute flex space-y-2 flex-col justify-center items-center inset-0 z-50 w-full h-full bg-rabab-500/10 text-rabab-500"
    data-testid="error"
  >
    <CatchIcon />
    <h3 className="text-sm font-medium">
      Toss it over and we&apos;ll catch it!
    </h3>
  </div>
)

Drop file to upload

Props

Name
accept? string
Type
Description
Allowed file types image/* | video/* | text/* | application/zip etc.
Name
className? string
Type
Description
The classess you can add.
Name
allowMultiple? boolean
Type
Description
Can handle multiple file uploads in one go.
Name
maxFileSize? `${number}${ByteUnits}`
Type
Description
The maximum allowed file size 4MB | 2KB ect.
Name
minFileSize? `${number}${ByteUnits}`
Type
Description
The minimum allowed file size 4MB | 2KB ect.
Name
maxTotalFileSize? `${number}${ByteUnits}`
Type
Description
The maximum allowed total file size 1GB etc.
Name
disabled? boolean;
Type
Description
Enables the disabled state.
Name
children? React.ReactNode;
Type
Description
The elements that will be rendered as children inside the dropzone.
Name
onClick?(event: React.MouseEvent<HTMLElement>, inputRef: React.RefObject<HTMLInputElement>) void
Type
Description
Callback invoked on click action.
Name
onDropAccepted? (acceptedFiles: File[]) => void
Type
Description
Callback function that activates when the drop operation includes at least one accepted file.
Name
onDropRejected? (rejectedFiles: File[]) => void
Type
Description
Callback function triggered when the drop operation includes at least one file that was rejected.
Name
onDragOver? () => void
Type
Description
Callback triggered during file drag over the designated area.
Name
onDragEnter? () => void
Type
Description
Callback triggered upon the entry of one or more files into the drag area.
Name
onDragLeave? () => void
Type
Description
Callback triggered when one or more files exit the drag area.
Name
onDrop? (files: File[], acceptedFiles: File[], rejectedFiles: File[], errors: ValidationError[],) => void
Type
Description
Callback triggered when files are droped.
Name
setError? React.Dispatch<React.SetStateAction<boolean>>
Type
Description
Set error true when the internal hasError changes value.
Name
setFileEnterZone? React.Dispatch<React.SetStateAction<boolean>>
Type
Description
Callback to update the state indicating whether a file has entered the drop zone area.

<DropZone
  accept='image/*'
  className='flex'
  allowMultiple
  maxFileSize='2MB'
  minFileSize='300KB'
  maxTotalFileSize='1GB'
  disabled={files.length > 10}
  onClick={() => {}}
  onDropAccepted={(acceptedFiles: File[]) => {}}
  onDropRejected={(rejectedFiles: File[]) => {}}
  onDrop={(allFiles: File[], accepted: File[], rejected: File[], error: ValidationError[]) => {}}
  onDragEnter={() => {}}
  onDragLeave={() => {}}
  onDragOver={() => {}}
  setError={(err: boolean) => {setError(err)}}
  setFileEnterZone={(enter: boolean) => {setEnter(enter)}}
/>

Feature Roadmap

PreviewHub

Effortlessly preview various image formats and play dropped videos in our enhanced Dropzone component

CropCraft

Refine visuals effortlessly; CropCraft offers precise image cropping and resizing tailored for perfection.

EditEase

Refine and redefine with EditEase. Achieve impeccable image edits, rotations, and mirror flips.

NeubulaZone React Dropzone is my embodiment of a lightweight, user-friendly component, enriched with extensive documentation and examples. Proudly open-sourced on GitHub for community contributions.