This is the Uploader component
Package version
npm i module-tsl-ui-uploader --save
5.4.15
imports
import { Uploader } from 'module-tsl-ui-uploader';
@import '~module-tsl-ui-uploader/uploader';
example (editable)
Supporting Documents
- Callback function is called on adding, editing, removing files.
- Accepted files are logged in the console for checking now.
- Also has a getFiles() function that can be called through reference.
Drag and drop your supporting
documents here or select
documents here or select
First file.pdf
Fake Filename And Extension.jpg
Filename without extension
Another file.wat
<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>
Props
We couldn't detect props! Check if __docgenInfo is correctly defined