@availity/upload v3.8.8
@availity/upload
Availity upload component for uploading files
Installation
npm install @availity/upload --save
Usage
import React from 'react';
import Upload from '@availity/upload';
// ...
<Upload
clientId="a"
bucketId="b"
customerId="c"
/>
// ...
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.
Props
btnText
: Node. Optional. The text which appears on the button. Default:+ Add File
for initial file or+ Add Another File Attachment
if an attachment already have been selected.bucketId
: String. Required. The ID of the bucket you want to upload to.customerId
: String. Required. The customer ID for the organization the user is uploading on behave of.clientId
: String. Required. The ID obtain from APIConnect. Must be subscribed to the resumeable uploads API.allowedFileTypes
: Array of strings. Optional. The file types you want to restrict uploading to. E.g.['.jpeg', '.jpg']
.onFileUpload
: Function. Optional. Callback called when file is uploaded. The callback will be provided theUpload
instance form upload-core SDK. Use this callback to track files which have been uploaded (to get references returned by the API).maxSize
: Number. Optional. The maximum file size (in bytes) for a file to be uploaded.max
: Number. Optional. 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. Default: unlimited.multiple
: Boolean. Optional. Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt. Default:true
showFileDrop
: Boolean. Optional. Set as true to show a drag and drop file upload option instead of a button (file explorer still available on click). Default:false
.
Upload Usage
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} // <-- callback function
max={1}
/>
// onUpload callback definition
onUpload(upload) {
if (upload) {
upload.onSuccess.push(async () => {
// success action
});
upload.onError.push(() => {
// error action
});
}
}
// ...
UploadProgressBar
The raw progress bar to be used when making your own.
Props
upload
: Instance of Upload from upload-core. Required. The upload instance returned by creating anew Upload
via upload-core.onProgress
: Function. Optional. Callback function to hook into theonProgress
within the Upload instance provided in theupload
prop.onSuccess
: Function. Optional. Callback function to hook into theonSuccess
within the Upload instance provided in theupload
prop.onError
: Function. Optional. Callback function to hook into theonError
within the Upload instance provided in theupload
prop.animated
: Boolean. Optional. Whentrue
the progress bar will have animated stripes while uploading is in progress.className
: String. Optional. Additional classNames to add to the progress bar.
UploadProgressBar Usage
import React from 'react';
import { UploadProgressBar } from '@availity/upload';
// ...
<UploadProgressBar
upload={uploadInstance}
animated
/>
// ...
FilePickerBtn
The raw file picker button which masks the file input with a button.
Props
onClick
: Function. Optional. Callback when the button is clicked.onChange
: Function. Optional. Callback when the user has selected a file or multiple files.multiple
: Boolean. Optional. Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt.allowedFileTypes
: Array of strings. Optional. The file types you want to restrict uploading to. E.g.['.jpeg', '.jpg']
.maxSize
: Number. Optional. The maximum file size (in bytes) for a file to be uploaded.
FilePickerBtn Usage
import React from 'react';
import { FilePickerBtn } from '@availity/upload';
handleFileSelection = event => {
const { files } = event.target;
// do something with the files.
}
// ...
<FilePickerBtn
onChange={this.handleFileSelection}
/>
// ...
FilePicker
The raw file picker which automatically resets the value of the input, allowing the same file to be selected multiple consecutive files.
Props
tag
: String or Function. Optional. The raw underlying component/element which should be rendered. Default reactstrap'sCustomInput
.onClick
: Function. Optional. Callback when the button is clicked.onChange
: Function. Optional. Callback when the user has selected a file or multiple files.multiple
: Boolean. Optional. Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt.allowedFileTypes
: Array of strings. Optional. The file types you want to restrict uploading to. E.g.['.jpeg', '.jpg']
.maxSize
: Number. Optional. The maximum file size (in bytes) for a file to be uploaded.
FilePicker Usage
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}
/>
// ...
7 days ago
2 months ago
2 months ago
6 months ago
6 months ago
7 months ago
9 months ago
12 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago