Availity component for uploading files
npx install-peerdeps @availity/upload --saveThe default export is an all-in-one solution which handles uploads, encrypted file password requests and file state management for you.
import React from 'react';
import Upload from '@availity/upload';
const Example = () => <Upload clientId="a" bucketId="b" customerId="c" />;+ 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.
The customer ID for the organization the user is uploading on behalf of.
The ID obtained from APIConnect. Must be subscribed to the resumeable uploads API.
Restrict the file name characters to a regex set.
Restrict the file types allowed to be uploaded to. eg: ['.jpeg', '.jpg'].
` An array of callbacks called before the file is uploaded. Each function should return a true or false. If one of these is false, then it will not upload. Useful for scanning files for corruption before uploading to the vault. To ensure that the file is not uploaded and return false, call setError on the UploadCore object to set some error message via calling upload.setError('rejected', somemessage) method for updating the UI. Make sure this is done relatively synchronously.
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).
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
The maximum file size (in bytes) for a file to be uploaded.
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.
Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt. Default: true.
Disable the file input Default: false.
Set as true to show a drag and drop file upload option instead of a button (file explorer still available on click).
Override the default error message for files rejected when showFileDrop is true.
When a user uploads an encrypted file, they are prompted to input a password. This function is called when the password form is submitted. By default, the event bubbles and will submit a form if the upload component is a child element of that form. Useful for adding event.stopPropagation() if this behavior is not desired.
Override the default z-index for the password prompt modal. Useful for squashing IE11 bugs by setting to auto if your upload component is already inside another modal.
import React from 'react';
import Upload from '@availity/upload';
const Example = () => (
<Upload btnText="Upload a claim" clientId="a" bucketId="b" customerId="c" multiple={false} max={1} />
);const Example = () => {
// onUpload callback definition
const onUpload = (upload) => {
if (upload) {
upload.onSuccess.push(async () => {
// success action
});
upload.onError.push(() => {
// error action
});
}
};
// onRemove callback definition
const onRemove = (file) => {
// remove action
};
return (
<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}
/>
);
};The raw file picker button that masks the file input with a button.
import React from 'react';
import { FilePickerBtn } from '@availity/upload';
const Example = () => {
const handleFileSelection = (event) => {
const { files } = event.target;
// do something with the files.
};
return <FilePicker onChange={handleFileSelection} />;
};Callback when the button is clicked.
Callback when the user has selected a file or multiple files.
Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt.
Disable the file input Default: false.
The file types you want to restrict uploading to. eg: ['.jpeg', '.jpg'].
The maximum file size (in bytes) for a file to be uploaded.
The raw file picker which automatically resets the value of the input, allowing the same file to be selected multiple consecutive files.
import React from 'react';
import { FilePicker } from '@availity/upload';
import { CustomInput } from 'reactstrap';
const Example = () => {
const handleFileSelection = (event) => {
const { files } = event.target;
// do something with the files.
};
return <FilePicker tag={CustomInput} onChange={handleFileSelection} />;
};The raw underlying component/element that should be rendered. Default: Reactstrap CustomInput.
Callback when the user has selected a file or multiple files.
Indicates that the user will be allowed to select multiple files when selecting files from the OS prompt.
The file types you want to restrict uploading to. eg: ['.jpeg', '.jpg'].
The maximum file size (in bytes) for a file to be uploaded.
The raw progress bar to be used when making your own.
import React from 'react';
import { UploadProgressBar } from '@availity/upload';
const Example = () => <UploadProgressBar upload={uploadInstance} animated />;The upload instance returned by creating a new Upload via upload-core.
Callback function to hook into the onProgress within the Upload instance provided in the upload prop.
Callback function to hook into the onSuccess within the Upload instance provided in the upload prop.
Callback function to hook into the onError within the Upload instance provided in the upload prop.
Triggers the "complete" style in the progress bar. When true, a checkmark appears at the end of the progress bar.
Triggers the "striped" style in the progress bar.
When true the progress bar has animated stripes while uploading is in progress.
Color of the progress bar. Default: success