filopplasting - www.nav.no

high contrast

File Upload

File upload component with drag and drop capability, compatible with mobile devices.

File Upload with initial file list

Either drag and drop more files into the drop area, or click on the drop area to open the file selection dialog.

Note that the already uploaded files have context buttons when hover.

Klikk her for å velge filer. Filformat er alle, maks 99 filer, maks størrelse 10MB.



PAGE 1

json

<FileUpload files={[
  require('./resources/samplePDF').default, 
  require('./resources/sampleJPG').default,
  require('./resources/sampleOther').default
]}/>

File Upload callback functions

Klikk her for å velge filer. Filformat er alle, maks 99 filer, maks størrelse 10MB.

<FileUpload 
  beforeFileDrop={() => console.log('Before drop')}
  afterFileDrop={() => console.log('After drop')}
  onFilesChanged={(files) => console.log('I have ' + files.length + ' files')}
/>

Component import

import FileUpload from 'filopplasting'

React props

Property	Type	Required	Description	Default
acceptedMimetypes	`string` or `list`	false	String with accepted mimetype or list of accepted mimetypes. If not defined, all files are accepted.	-
afterFileDrop	`function`	false	Callback function triggered after file drop.	-
beforeFileDrop	`function`	false	Callback function triggered before file drop.	-
className	`string`	false	Additional classnames	-
files	`list`	false	List of initial files in the file upload	[]
highContrast	`boolean`	false	Render in high contrast theme or not	false
labels	`object`	false	List of optional labels that override the default labels
maxFiles	`number`	false	Maximum number of allowed files	99
maxFileSize	`number`	false	Maximum size of acceptable files, in bytes. Default value is 10 MB.	10485760
onFilesChanged	`function`	false	Callback function triggered when the uploaded file list changes	-