forhandsvisningsfil - www.nav.no

File component

File component renders a given file, so it can be used in GUI operations such as drag and drop, preview, page browsing, etc.

PDF - Renders a PDF page (browsable), can add optional download/preview/delete buttons
Image - Renders the image, can add optional download/preview/delete buttons
Other - Renders a file placeholder, with optional download/delete buttons

The file prop has to be a JavaScript object with keys:

id - an identification ID (optional)
name - For the file name (mandatory)
mimetype - For the mimetype (mandatory)
size - For the file size (optional)
numPages - Number of pages (optional)
content - An object with a base64key in it (mandatory),

An example of a file object property:

{
  id: '1',
  name: 'example.pdf',
  mimetype: 'application/pdf',
  numPages: 5,
  size: 12834,
  content: {
    base64: 'JVBERi0xLjQKJcOkw7zDtsOfCjIgMCBvYm(...)'
  }
}

PDF File

Laster ned PDF...

PDF file renders a page with a default width/height and a folded-corner style.

If the PDF file has additional pages, one can see arrows in the sides of the page, when the mouse hovers the page.

While you can override width and height params, it is easier to set a scale value (scale 1.0 matches a width of 100px and height of 140 px).

<File file={samplePDF} scale={2}/>

Image file

Image file renders the base64 content of an image with a fixed max-height given my heightproperty (with defaylt 100px as a scale 1.0).

Like the PDF file, you can use the scale property to set the image size while preserving the aspect ratio

<File file={sampleJPG} scale={1.5}/>

Other file

json

Other files renders as a blank page with is extension (derived from filename) as the center title.

<File file={sampleOther} scale={1.5}/>

File context buttons

PDF file renders a page with a default width/height and a folded-corner style.

If the PDF file has additional pages, one can see arrows in the sides of the page, when the mouse hovers the page.

While you can override width and height params, it is easier to set a scale value (scale 1.0 matches a width of 100px and height of 140 px).

Buttons position

Buttons visibility

view one Page

◀0

Laster ned PDF...

<File 
  file={samplePDF}
  buttonsVisibility='always'
  buttonsPosition='inside'
  viewOnePage=true
  initialPage={2}
  showAddButton
  showDeleteButton
  showDownloadButton
  showPreviewButton
  onAddFile={(file) => console.log('onAddFile: ', file)}
  onDeleteFile={(file) => console.log('onDeleteFile: ', file)}
  onDownloadFile={(file) => console.log('onDownloadFile: ', file)}
  onPreviewFile={(file) => console.log('onPreviewFile: ', file)}
  onContentClick={(file) => console.log('onContentClick: ', file)}
  onPreviousPage={(file) => console.log('onPreviousPage: ', file)}
  onNextPage={(file) => console.log('onNextPage: ', file)}
  scale={2}/>

Component import

import File from 'forhandsvisningsfil'

React props

Property	Type	Required	Description	Default
animate	`boolean`	false	Animate the file rendering	`true`
buttonsPosition	`string`	false	When to place context buttons. It can be one of values `inside` (over the file div) or`header` above the file div	`inside`
buttonsVisibility	`string`	false	When to show context buttons. It can be one of values `always` (always visible), `hover` (visible only when hovering file), or `none`	`hover`
className	`string`	false	Additional classnames	-
file	`object`	true	File object. See above for a sample on how the object should be	-
height	`number`	false	File height, in pixels	140
highContrast	`boolean`	false	Render in high contrast theme or not	false
initialPage	`number`	false	Set the intial page for PDF rendering	-
labels	`object`	false	Optional label object to override the default labels	-
onAddFile	`function`	false	Callback function triggered when the Add button is clicked	-
onContentClick	`function`	false	Callback function triggered when the file content is clicked	-
onDeleteFile	`function`	false	Callback function triggered when the Delete button is clicked	-
onLoadSuccess	`function`	false	Callback function triggered when the file content is loaded (PDF file only)	-
onPreviewFile	`function`	false	Callback function triggered when the Preview button is clicked	-
onPreviousPage	`function`	false	Callback function triggered when the Previous page button is clicked	-
onNextPage	`function`	false	Callback function triggered when the Next page button is clicked	-
scale	`number`	false	Scale of the file	1.0
showAddButton	`boolean`	false	Display toggle for the Add button	false
showDeleteButton	`boolean`	false	Display toggle for the Delete button	false
showDownloadButton	`boolean`	false	Display toggle for the Download button	false
showPreviewButton	`boolean`	false	Display toggle for the Preview button	false
viewOnePage	`boolean`	true	For PDFs, toggle between view one page at a time, or render all pages at once	true
width	`number`	false	File width, in pixels	100