Document uploader

The document uploader is a UI-only field component for uploading files.

It provides an input group combined with a List Item showing document info and should be used with the modal component for confirming delete DocumentUploader.Modal.

To tie the logic together there is a hook `use-document-upload` designed to provide the custom logic to control these components.

Live demo

Design

Usage

The document uploader is used to upload files from your computer or device by clicking the button to open the system’s file browser.

It should be used to allow users to provide required documentation.

Specs

The document uploader is made of:

Label

Title of the required document.
Should be short and concise [single line of text]
Text style for the label is System Caption S

Upload button

Action to be performed [Upload + title of the document]
Style: Secondary-button L

Helper

The helper text communicates to the user what file size or format limitations there are.
Text style for the label is System Caption L

Document

The document should contain the name of the file that has been uploaded.
The document has two states: uploading and uploaded. When the document has been uploaded the users will be able to remove it by clicking the “x” icon.

Please refer to Specs for examples

Behaviour

Default state

Clicking the button will prompt the system’s file browser to open, allowing the user to select a document.

Uploading state

After the upload begins, the document component will populate below the file uploader button indicating the % indicating the percentage complete.

Uploaded

Once the document is uploaded, the user will be able to remove it using the “x” icon. Refer to icons for icon’s specs and touch areas.
A modal will appear asking the user to confirm the action.
A toast message will appear when the document is uploaded by the user.

Please refer to Behaviour for examples

Placement

Please refer to the prototype for examples within a form

Accessibility

Use the appropriate ARIA attributes for screen readers where applicable.

Code

import { DocumentUploader } from '@shieldpay/bumblebee/document-uploader';

<DocumentUploader
  name="someInput1"
  value={filename}
  fileId={fileIdFromExternalService}
  deleteDocumentText="Delete document"
  helpText="JPGs etc"
  uploadingText="Uploading"
  onChange={convertAndUploadFunction}
  onClear={onClear}
  validation={externalValidation}
  validating={false}
/>;

<DocumentUploader.Modal
  handleClearCancel={handleCloseModalWithoutChanges}
  handleClearConfirm={handleCloseModalAndDelete}
  showModal
  title={<>R U sure you want to delete?</>}
  cancelText={<>Oh no!</>}
  closeText={<>Not now!</>}
  confirmText={<>Damn right!</>}
/>;