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:

$ 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:

import { ImageManager } from '@uscreentv/uppy-manager'

const uppy = new Uppy({
  meta: {
    path: '/',
  },
  restrictions: {
    maxNumberOfFiles: 1,
  },
})
  .use(AwsS3, {
    companionUrl: 'https://foo.bar',
  })
  .use(ImageManager)

uppy.on('complete', ({ successful, failed }) => {
  // handle uploaded files here
})

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:

import { ImageManager } from '@uscreentv/uppy-manager'

const uppy = new Uppy({
  meta: {
    path: '/',
  },
  restrictions: {
    allowedFileTypes: ['image/*', 'text/*'],
    allowMultipleUploads: maxFiles > 1,
    maxFileSize: 3600000,
    maxNumberOfFiles: 10,
  },
})
  .use(AwsS3, {
    companionUrl: 'https://foo.bar',
  })
  .use(FilesManager, {
    inline: false,
  })

uppy.on('complete', ({ successful, failed }) => {
  // handle uploaded files here
})

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.