Images Multi Upload

A plugin for the Froala WYSIWYG Editor that allows uploading one or more images to the server in a single popup, with per-image previews, progress bars and the ability to remove individual files before insertion.

📋 Prerequisites

• Froala Editor: >=3.0
• Node.js: >=14 (for building from source)
• npm: >=6

🚀 Quick Start

Installation

Install from npm:

npm install froala-images-multi-upload

Or install directly from the GitHub repository:

npm install github:heymexa/froala-images-multi-upload

Including the Plugin

If you do not use a bundler, include the files directly in your HTML:

<!-- Plugin CSS -->
<link rel="stylesheet" href="/path_to_plugin_css/imagesMultiUpload.css">

<!-- Plugin JS -->
<script src="/path_to_plugin_js/imagesMultiUpload.js"></script>

Or import them in your JS:

import 'froala-images-multi-upload/build/js/imagesMultiUpload';
import 'froala-images-multi-upload/build/css/imagesMultiUpload.css';

Registering the Toolbar Button

Add imagesMultiUpload to your Froala toolbar configuration:

new FroalaEditor('#editor', {
  imageUploadURL: '/api/upload',
  toolbarButtons: ['bold', 'italic', '|', 'imagesMultiUpload']
});

⚙️ Configuration

The plugin reuses the standard Froala image.* options for compatibility with the built-in image plugin.

📝 Options

Option	Required	Default	Description
imageUploadURL	yes	—	Server endpoint that receives uploaded images
imageUploadParam	no	'file'	Form field name for the uploaded file
imageUploadParams	no	{}	Extra fields appended to the upload request
imageAllowedTypes	no	['jpeg', 'jpg', 'png', 'gif']	Allowed file types (extensions without image/)
imageMaxSize	no	10 * 1024 * 1024	Maximum file size in bytes (default 10 MB)

⚠️ Client-side validation is a UX safeguard only. Always re-validate file type and size on the server.

📡 Server Response Format

Each upload request must return a JSON body containing the URL of the stored image:

{ "link": "https://cdn.example.com/uploads/abc.jpg" }

Non-2xx responses, invalid JSON, or missing link field mark the image as failed and prevent it from being inserted.

🛠️ Development

Installation

npm install

Commands

npm run build       # Build JS + CSS into ./build
npm run build-js    # Babel transpile src/js → build/js
npm run build-css   # PostCSS pipeline src/css → build/css
npm run lint        # ESLint over ./src

🏗️ Project Structure

froala-images-multi-upload/
├── src/
│   ├── js/
│   │   └── imagesMultiUpload.js   # Plugin source
│   └── css/
│       └── imagesMultiUpload.css  # Plugin styles
├── build/                         # Generated by `npm run build`
├── .babelrc                       # @babel/preset-env config
├── postcss.config.js              # PostCSS plugins
└── .eslintrc                      # ESLint config (airbnb-base)

🔍 Code Quality

• ESLint — airbnb-base config
• Husky — pre-commit lint hook
• Prettier — code formatting

📚 Technology Stack

• Babel 7 (@babel/preset-env) — JS transpilation
• PostCSS 8 with postcss-preset-env, postcss-import, postcss-nested
• jQuery — provided by Froala Editor

📄 License

The code in this project is licensed under the MIT License.