@availity/upload
Availity upload component for uploading files
Last updated 13 days ago by availity-bot-cicd .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @availity/upload 
SYNC missed versions from official npm registry.

@availity/upload

Availity component for uploading files

Version

Installation

npx install-peerdeps @availity/upload --save

Upload (Default export)

The default export is an all-in-one solution which handles uploads, encrypted file password requests and file state management for you.

Example

import React from 'react';
import Upload from '@availity/upload';

<Upload clientId="a" bucketId="b" customerId="c" />;

Props

btnText?: ReactNode

+ Add File for initial file or + Add Another File Attachment if an attachment already have been selected. | The text that appears on the button.

The ID of the bucket you want to upload to.

customerId: string

The customer ID for the organization the user is uploading on behalf of.

clientId: string

The ID obtained from APIConnect. Must be subscribed to the resumeable uploads API.

allowedFileNameCharacters?: string

Restrict the file name characters to a regex set.

allowedFileTypes?: Array<string>

Restrict the file types allowed to be uploaded to. eg: ['.jpeg', '.jpg'].

onFileUpload?: (upload: UploadCore) => void

Callback called when file is uploaded. The callback is provided the Upload instance from upload-core SDK. Use this callback to track which files have been uploaded (to get references returned by the API).

onFileRemove?: (files: Array<File>, fileId: String) => void

Callback called when file is removed. The callback is provided two arguments. 1. the updated files and 2. the id of the file that was removed

maxSize?: number

The maximum file size (in bytes) for a file to be uploaded.

max?: number

The maximum number of files allowed to be uploaded. 0 (or a falsey value) means unlimited. When the max number has been reached, the add button will disappear.

multiple?: boolean

Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt. Default: true.

disabled?: boolean

Disable the file input Default: false.

showFileDrop?: boolean

Set as true to show a drag and drop file upload option instead of a button (file explorer still available on click).

getDropRejectionMessage?: (errors: Array<FileError>, file: File) => String

Override the default error message for files rejected when showFileDrop is true.

Example

import React from 'react';
import Upload from '@availity/upload';

<Upload
  btnText="Upload a claim"
  clientId="a"
  bucketId="b"
  customerId="c"
  multiple={false}
  max={1}
/>;

Callback Function Usage

<Upload
  btnText="Upload a claim"
  clientId="a"
  bucketId="b"
  customerId="c"
  onFileUpload={onUpload} // <-- add file callback function
  onFileRemove={onRemove} // <-- remove file callback function
  max={1}
/>

// onUpload callback definition
onUpload(upload) {
    if (upload) {
      upload.onSuccess.push(async () => {
        // success action
      });
      upload.onError.push(() => {
        // error action
      });
    }
  }
// ...

// onRemove callback definition
onRemove(file) {
  // remove action
}

FilePickerBtn (Named Export)

The raw file picker button that masks the file input with a button.

Example

import React from 'react';
import { FilePickerBtn } from '@availity/upload';

handleFileSelection = event => {
  const { files } = event.target;
  // do something with the files.
};

<FilePickerBtn onChange={this.handleFileSelection} />;

Props

onClick?: (event: Event) => void

Callback when the button is clicked.

onChange?: (event: Event) => void

Callback when the user has selected a file or multiple files.

multiple?: boolean

Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt.

disabled?: boolean

Disable the file input Default: false.

allowedFileTypes?: Array<string>

The file types you want to restrict uploading to. eg: ['.jpeg', '.jpg'].

maxSize?: number

The maximum file size (in bytes) for a file to be uploaded.

FilePicker (Named Export)

The raw file picker which automatically resets the value of the input, allowing the same file to be selected multiple consecutive files.

Example

import React from 'react';
import { FilePicker } from '@availity/upload';
import { CustomInput } from 'reactstrap';

handleFileSelection = event => {
  const { files } = event.target;
  // do something with the files.
};

<FilePicker tag={CustomInput} onChange={this.handleFileSelection} />;

Props

tag?: React.ComponentType | string

The raw underlying component/element that should be rendered. Default: Reactstrap CustomInput.

onChange?: (event: Event) => void

Callback when the user has selected a file or multiple files.

multiple?: boolean

Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt.

allowedFileTypes?: Array<string>

The file types you want to restrict uploading to. eg: ['.jpeg', '.jpg'].

maxSize?: number

The maximum file size (in bytes) for a file to be uploaded.

UploadProgressBar

The raw progress bar to be used when making your own.

Example

import React from 'react';
import { UploadProgressBar } from '@availity/upload';

<UploadProgressBar upload={uploadInstance} animated />;

Props

upload?: UploadCore

The upload instance returned by creating a new Upload via upload-core.

onProgress?: (upload: UploadCore) => void

Callback function to hook into the onProgress within the Upload instance provided in the upload prop.

onSuccess?: (upload: UploadCore) => void

Callback function to hook into the onSuccess within the Upload instance provided in the upload prop.

onError?: (upload: UploadCore) => void

Callback function to hook into the onError within the Upload instance provided in the upload prop.

complete?: boolean

Triggers the "complete" style in the progress bar. When true, a checkmark appears at the end of the progress bar.

striped?: boolean

Triggers the "striped" style in the progress bar.

animated?: boolean

When true the progress bar has animated stripes while uploading is in progress.

color?: string

Color of the progress bar. Default: success

Current Tags

  • 2.1.4-alpha.99                                ...           canary (3 months ago)
  • 2.3.19                                ...           latest (13 days ago)
  • 0.0.0-t325224b2                                ...           unstable (2 years ago)

55 Versions

  • 2.3.19                                ...           13 days ago
  • 2.1.4-alpha.99                                ...           3 months ago
  • 2.1.4-alpha.96                                ...           3 months ago
  • 2.1.4-alpha.95                                ...           3 months ago
  • 2.1.4-alpha.93                                ...           4 months ago
  • 2.1.4-alpha.91                                ...           4 months ago
  • 2.1.4-alpha.88                                ...           4 months ago
  • 2.1.4-alpha.85                                ...           4 months ago
  • 2.3.18                                ...           4 months ago
  • 2.3.17                                ...           7 months ago
  • 2.3.16                                ...           7 months ago
  • 2.3.15                                ...           7 months ago
  • 2.3.14                                ...           7 months ago
  • 2.3.13                                ...           8 months ago
  • 2.3.12                                ...           8 months ago
  • 2.3.11                                ...           8 months ago
  • 2.3.10                                ...           8 months ago
  • 2.3.9                                ...           8 months ago
  • 2.3.8                                ...           8 months ago
  • 2.3.6                                ...           8 months ago
  • 2.3.5                                ...           8 months ago
  • 2.3.4                                ...           8 months ago
  • 2.3.3                                ...           8 months ago
  • 2.3.2                                ...           8 months ago
  • 2.3.1                                ...           8 months ago
  • 2.3.1-alpha.26                                ...           9 months ago
  • 2.3.0                                ...           9 months ago
  • 3.0.0-alpha.74                                ...           10 months ago
  • 2.2.1                                ...           a year ago
  • 2.2.0                                ...           a year ago
  • 2.1.3                                ...           a year ago
  • 2.1.2                                ...           a year ago
  • 2.1.1                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           a year ago
  • 2.0.4                                ...           a year ago
  • 2.0.3                                ...           a year ago
  • 2.0.2                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.8.2                                ...           2 years ago
  • 1.8.1                                ...           2 years ago
  • 1.8.0                                ...           2 years ago
  • 1.7.4                                ...           2 years ago
  • 1.7.3                                ...           2 years ago
  • 1.7.2                                ...           2 years ago
  • 1.7.1                                ...           2 years ago
  • 1.7.0                                ...           2 years ago
  • 0.0.0-t325224b2                                ...           2 years ago
  • 1.6.1                                ...           2 years ago
  • 1.6.0                                ...           2 years ago
  • 1.5.2                                ...           2 years ago
  • 1.5.1                                ...           2 years ago
  • 1.5.0                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 55
Last Month 125
Dependencies (3)
Dev Dependencies (7)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |