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

1npm install tiptap-extension-upload-image

Usage

Import package and css

1import UploadImage from 'tiptap-extension-upload-image';
2import 'tiptap-extension-upload-image/dist/upload-image.min.css';
3//Optional
4import axios from 'axios';

Register in editor extensions

1extensions: [
2  StarterKit,
3  UploadImage.configure({
4    uploadFn: uploadFn
5  }),
6]

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.

1const uploadFn = (file) => {
2    var formData = new FormData();
3    formData.append("image", file);
4    return axios.post('/tools/guidelines/media', formData)
5    .then((response) => {
6        return response.data.url
7    })
8    .catch((e) => {
9        //Optionaly you can send only throw
10        throw(e.response.data.error);
11    }); 
12}

Add command to your menu button

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

1editor.chain().focus().addImage().run()

Styling

You can overwrite the color of spinner.

1.image-uploading::before {
2    border-top-color: #1e986c;
3}