Uploader

<div style={{ width: 600 }}>
  <Uploader
    label="Supporting Documents"
    info={
      <ul>
        <li>Callback function is called on adding, editing, removing files.</li>
        <li>Accepted files are logged in the console for checking now.</li>
        <li>Also has a getFiles() function that can be called through reference.</li>
      </ul>
    }
    ctaText={
      <span>
        Drag and drop your supporting
        <br />
        documents here
      </span>
    }
    callback={files => console.log(files)}
    onAdd={files => console.log(files)}
    onUpdate={file => console.log(file)}
    onDelete={file => console.log(file)}
    onPrint={file => console.log(file)}
    onDownload={(file, event) => console.log(file, event)}
    multiple
    types={['Person specification', 'Applicant information pack', 'Other documents']}
    files={[
      {
        isAmenable: false,
        isPrintable: true,
        name: 'First file.pdf',
        downloadUrl: 'https://google.com',
        customOptions: <div className="tds-file-option tds-no-select">Preview file</div>,
      },
      {
        accepted: false,
        name: 'Another file.wat',
        type: 'Applicant information pack',
      },
      {
        accepted: true,
        name: 'Fake Filename And Extension.jpg',
        type: 'Applicant information pack',
      },
      {
        accepted: true,
        name: 'Filename without extension',
        info: 'We are unable to preview this type of file, please download it',
      },
    ]}
  />
</div>