# next-image-uploader

> Drag and drop image uploader for Nextjs.

Latest version **0.0.5** (published 2022-09-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install next-image-uploader
pnpm add next-image-uploader
yarn add next-image-uploader
bun add next-image-uploader
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-09-05 |
| First published | 2022-09-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 31.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Tallis |
| Maintainers | tallis |
| Keywords | react, image uploader, nextjs |

## Links

- npm: https://www.npmjs.com/package/next-image-uploader
- Repository: https://github.com/katyperrycbt/next-image-uploader
- Homepage: https://github.com/katyperrycbt/next-image-uploader#readme
- Issues: https://github.com/katyperrycbt/next-image-uploader/issues
- npm.io page: https://npm.io/package/next-image-uploader

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.5 (latest) — 2022-09-05
- 0.0.4 — 2022-09-05
- 0.0.3 — 2022-09-05
- 0.0.2 — 2022-09-05
- 0.0.1 — 2022-09-05
- 0.0.0 — 2022-09-05

## README

## Nextjs Image Uploader

Drag and drop image uploader for Nextjs.

![Demo](https://res.cloudinary.com/katyperrycbt/image/upload/v1662363644/Dashboard-and-3-more-pages-Personal-Microsoft_-Edge-2022-09-05-14-18-40-_online-video-cutter.com__yxdggp.gif)

### Installation

```bash
pnpm add next-image-uploader
```

or

```bash
yarn add next-image-uploader
```

### Usage

```tsx
import React, { useState } from "react";
import ImageUploader from "react-image-uploader";

const App = () => {
	const [photo, setPhoto] = useState(null);

	return (
		<ImageUploader
			photo={photo}
			setPhoto={setPhoto}
			hoverIcon={hoverIcon}
			dropScope="window"
			onError={(error) => console.log(error)}
		/>
	);
};

export default App;

const hoverIcon = (
	<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"
	>
		<path
			strokeLinecap="round"
			strokeLinejoin="round"
			d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
		/>
		<path
			strokeLinecap="round"
			strokeLinejoin="round"
			d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z"
		/>
	</svg>
);

```

### Props

**Main**

| Name     | Type     | Default | Description                                 |
| -------- | -------- | ------- | ------------------------------------------- |
| photo    | string   | ''      | The preview image to be displayed.          |
| setPhoto | function | null    | The callback function to receive the image. |

**Additional**

| Name            | Type                              | Default   | Description                                                                                                           |
| --------------- | --------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
| alt             | string                            | 'image'   | The alt text of the Image.                                                                                            |
| objectFit       | string                            | 'cover'   | The object-fit property.                                                                                              |
| setFileName     | function                          | null      | The callback func to get the file name.                                                                               |
| setSize         | function                          | null      | The callback func to get the file size (width, height)                                                                |
| isFormik        | boolean                           | false     | If true, the **<font style="color: red;">setPhoto</font>** will receive the file object instead of the base64 string. |
| getFileSize     | function                          | null      | The callback func to get the file size                                                                                |
| disabled        | boolean                           | false     | If true, the uploader will be disabled                                                                                |
| inputRef        | React.RefObject<HTMLInputElement> | null      | The ref of the input element, if you want to control the input element                                                |
| className       | string                            | ''        | The class name of the uploader's root                                                                                 |
| hoverIcon       | React.ReactNode                   | null      | The icon to be displayed when hovering the uploader                                                                   |
| dropScope       | string                            | 'element' | The drop area of the uploader. 'element' means the whole uploader, 'window' means the whole window.                   |
| onError         | function                          | null      | The callback func to handle the error.                                                                                |
| onDraggingImage | string                            | null      | The displayed image when dragging the image.                                                                          |

---
_Source: https://npm.io/package/next-image-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._