ngx-quill-upload (Angular 4+) (v2.0)

A module for images and videos to be uploaded to a server instead of being base64 encoded, in ngx-quill from toolbar editor.

Features

• Written in typescript
• Bundled in both FESM2015 and UMD formats
• Just 6.4KB (2.4 KB gzipped)
• Gives you full control over API call, upload to S3 or server as required
• Supports png, jpg and jpeg for image uploads
• Supports mp4 and webm for video uploads
• Supports <img> tag for image uploads, <video> tag for video uploads
• Based on quill-upload by john-techfox

Updates

• Image Attribute support added for ['style','alt','width','height']
• Concurrent upload handling for images, videos
• MIME Type check added for files
• Added Support for providing extensions for the following image and video formats -
  • Supported Image Extensions -
    • 'apng', 'bmp', 'gif', 'ico', 'cur', 'jpg', 'jpeg', 'jfif', 'pjpeg', 'pjp', 'png', 'svg', 'tif', 'tiff', 'webp'
  • Supported Video Extensions -
    • 'mp4', 'webm', '3gp', 'mp4', 'mpeg', 'quickTime', 'ogg'

Installation

• npm install ngx-quill-upload
• install quill and ngx-quill for usage with ngx-quill
• Make sure you have registered QuillModule as per ngx-quill documentation

NPM Directory

ngx-quill-upload

Usage

In your component.ts

1import Quill from 'quill';
2import { VideoHandler, ImageHandler, Options } from 'ngx-quill-upload';
3
4Quill.register('modules/imageHandler', ImageHandler);
5Quill.register('modules/videoHandler', VideoHandler);
6
7
8  modules = {
9    toolbar: [
10    ....
11    ....
12      ['image', 'video']
13    ],
14    imageHandler: {
15      upload: (file) => {
16       return // your uploaded image URL as Promise<string>
17      },
18      accepts: ['png', 'jpg', 'jpeg', 'jfif'] // Extensions to allow for images (Optional) | Default - ['jpg', 'jpeg', 'png']
19    } as Options,
20    videoHandler: {
21      upload: (file) => {
22        return // your uploaded video URL as Promise<string>
23      },
24      accepts: ['mpeg', 'avi']  // Extensions to allow for videos (Optional) | Default - ['mp4', 'webm']
25    } as Options
26  };

In your component.html markup

1 <quill-editor [modules]="modules"></quill-editor>

A sample upload function for imageHandler

1   upload: (file) => {
2        return new Promise((resolve, reject) => {
3
4      if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg') { // File types supported for image
5        if (file.size < 1000000) { // Customize file size as per requirement
6        
7        // Sample API Call
8          const uploadData = new FormData();
9          uploadData.append('file', file, file.name);
10
11          return this.http.post('YOUR API URL', uploadData).toPromise()
12            .then(result => {
13                resolve(result.message.url); // RETURN IMAGE URL from response
14            })
15            .catch(error => {
16              reject('Upload failed'); 
17              // Handle error control
18              console.error('Error:', error);
19            });
20        } else {
21          reject('Size too large');
22         // Handle Image size large logic 
23        }
24      } else {
25        reject('Unsupported type');
26       // Handle Unsupported type logic
27      }
28    });
29  }

Angular Universal

• As of now ngx-quill-upload isn't optimized for Server side rendering. Consider adding a plaform-browser check on your own if you plan to use SSR.

Suppress global register warnings

ngx-quill-upload uses Quill.register for overwriting an existing module for Image and Video handler, QuillJS logs a warning. To supress those expected warnings you can turn them off by passing suppressGlobalRegisterWarning: true in ngx-quill config. Read more here