# tiptap-extension-upload-image

> The seamless image upload feature with real-time preview. Effortlessly add images to your content while a dynamic placeholder fills in during the upload process. Enhance your editing experience with this intuitive extension.

Latest version **1.0.1** (published 2024-05-22) · 0 weekly downloads

## Install

```sh
npm install tiptap-extension-upload-image
pnpm add tiptap-extension-upload-image
yarn add tiptap-extension-upload-image
bun add tiptap-extension-upload-image
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-05-22 |
| First published | 2023-08-26 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 25.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | carlosvaldesweb |

## Links

- npm: https://www.npmjs.com/package/tiptap-extension-upload-image
- npm.io page: https://npm.io/package/tiptap-extension-upload-image

## Dependencies (1)

- [@tiptap/extension-image](https://npm.io/package/@tiptap/extension-image.md) ^2.4.0

## Recent versions

- 1.0.1 (latest) — 2024-05-22
- 1.0.0 — 2023-08-26

## README

# Tiptap Extension Upload Image

The seamless image upload feature with real-time preview. Effortlessly add images to your content while a dynamic placeholder fills in during the upload process. Enhance your editing experience with this intuitive extension.

## Installation

```bash
npm install tiptap-extension-upload-image
```

## Usage

#### Import package and css
```js
import UploadImage from 'tiptap-extension-upload-image';
import 'tiptap-extension-upload-image/dist/upload-image.min.css';
//Optional
import axios from 'axios';
```

#### Register in editor extensions

```js
extensions: [
  StarterKit,
  UploadImage.configure({
    uploadFn: uploadFn
  }),
]
```

#### Create a function to upload images

This function is used to upload images using axios or the manager of your preference. It should return a string with the image URL in case of success. In case of an error, it should throw an exception. I am sending this function in the extension's configuration.

```js
const uploadFn = (file) => {
    var formData = new FormData();
    formData.append("image", file);
    return axios.post('/tools/guidelines/media', formData)
    .then((response) => {
        return response.data.url
    })
    .catch((e) => {
        //Optionaly you can send only throw
        throw(e.response.data.error);
    }); 
}
```

#### Add command to your menu button

Add this line to your button to open the input type file to select image.

```js
editor.chain().focus().addImage().run()
```

#### Styling

You can overwrite the color of spinner.

```css
.image-uploading::before {
    border-top-color: #1e986c;
}
```

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