Image Drag and Drop

Image drag and drop component for uploading images via drag-and-drop or file selection.

Usage

Drag & drop or to uploadJPG or PNG. Max 200kb

import { ImageDragAndDrop } from "@aqqo/aqqo-ui";

<ImageDragAndDrop onFileChange={(file) => console.log(file)} />

Props

Prop	Type	Default	Description
`className`	`string`	`undefined`	Additional CSS classes for custom styling.
`onFileChange`	`(file: File \| null) => void`	`undefined`	Callback function called when file changes.
`accept`	`string`	`"image/jpeg,image/png"`	Accepted file types (MIME types).
`maxSize`	`number`	`200 * 1024`	Maximum file size in bytes (default: 200kb).
`value`	`File \| null`	`undefined`	Controlled file value. When provided, component operates in controlled mode.

Examples

Basic Usage

Drag & drop or to uploadJPG or PNG. Max 200kb

import { ImageDragAndDrop } from "@aqqo/aqqo-ui";
 
<ImageDragAndDrop onFileChange={(file) => {
  if (file) {
    console.log("File selected:", file.name);
  } else {
    console.log("File removed");
  }
}} />

Controlled Mode

import { ImageDragAndDrop } from "@aqqo/aqqo-ui";
import { useState } from "react";
 
function MyComponent() {
  const [file, setFile] = useState<File | null>(null);
 
  return (
    <ImageDragAndDrop
      value={file}
      onFileChange={setFile}
    />
  );
}

Custom File Types and Size

import { ImageDragAndDrop } from "@aqqo/aqqo-ui";
 
<ImageDragAndDrop
  accept="image/jpeg,image/png,image/gif"
  maxSize={500 * 1024} // 500kb
  onFileChange={(file) => console.log(file)}
/>

States

The component has four distinct states:

Default/Empty: Shows a dashed border container with cloud icon and upload instructions.
Hover/Active: When dragging a file over the component, the border turns green and background gets a light green tint.
File Uploaded/Preview: Displays the uploaded image as a preview with rounded corners.
File Uploaded with Delete: When hovering over the preview, the image blurs and a delete button appears in the center.

File Validation

The component automatically validates files:

File Type: Only accepts JPG and PNG files by default (configurable via accept prop).
File Size: Maximum file size is 200kb by default (configurable via maxSize prop).
Invalid files are rejected and onFileChange is not called.

Behavior

Drag and Drop: Users can drag files from their file system and drop them onto the component.
File Selection: Users can click the "choose file" link to open the file picker.
Image Preview: After a valid file is selected, it's displayed as a preview.
Delete: Hovering over the preview shows a delete button. Clicking it removes the file and resets the component.