Uscreen Uppy managers

Small and stylish uploaders for images and files based on uppy.

Installation

Do it with npm or with your favorite packages manager:

1$ npm i @uscreentv/uppy-manager

You should also install @uppy/core@^17.0.0, @uppy/aws-s3@^1.7.0 and have configured @uppy/companion service.

ImageManager

This plugin includes interface for images uploading.

Usage

⚠️ restrictions.maxNumberOfFiles in Uppy options should be equal to 1, because ImageManager can process only one image.

Example:

1import { ImageManager } from '@uscreentv/uppy-manager'
2
3const uppy = new Uppy({
4  meta: {
5    path: '/',
6  },
7  restrictions: {
8    maxNumberOfFiles: 1,
9  },
10})
11  .use(AwsS3, {
12    companionUrl: 'https://foo.bar',
13  })
14  .use(ImageManager)
15
16uppy.on('complete', ({ successful, failed }) => {
17  // handle uploaded files here
18})

Options

• title: string – uploader's frame title
• imageSize: { width: number, height: number } – aspect ratio dimensions. Use { width: 1, height: 1 } for square cropping shape, or { width: 16, height: 9 } for 16:9.
• target: HTMLElement – manager's mounting node
• inline: boolean - render manager directly in target node instead of modal window
• reactive: boolean – uploads files right after selection. ⚠️ Works only with inline mode.

FilesManager

Example:

1import { ImageManager } from '@uscreentv/uppy-manager'
2
3const uppy = new Uppy({
4  meta: {
5    path: '/',
6  },
7  restrictions: {
8    allowedFileTypes: ['image/*', 'text/*'],
9    allowMultipleUploads: maxFiles > 1,
10    maxFileSize: 3600000,
11    maxNumberOfFiles: 10,
12  },
13})
14  .use(AwsS3, {
15    companionUrl: 'https://foo.bar',
16  })
17  .use(FilesManager, {
18    inline: false,
19  })
20
21uppy.on('complete', ({ successful, failed }) => {
22  // handle uploaded files here
23})

Options

• title: string – uploader's frame title
• target: HTMLElement – manager's mounting node
• inline: boolean - render manager directly in target node instead of modal window

License

The MIT License.