File

The File component enables content creators to upload files. This feature is particularly useful when you need to include downloadable documents on your page, such as PDF catalogs or terms and conditions. You can specify which file extensions are allowed for each File component.

Usage Example

import { File } from 'react-bricks/frontend'
...

<File
  propName="catalog"
  allowedExtensions={['.pdf']}
  renderBlock={({ name, url, size }) => (
    <a href={url}>
      {name}, {size / 1024} KB
    </a>
  )}
/>

The JSX returned by the render function is displayed on both the frontend and the Editor interface. In the editor, content creators can upload a file by clicking on the rendered JSX. They can also remove a file or provide an SEO-friendly name (enforced via rewrite rules).

You can render different elements on the frontend and admin interface by checking the isAdmin flag.

Properties

Here’s the TypeScript interface for the props of the File component:

interface FileProps {
  propName: string
  source?: types.IFileSource
  renderBlock: (props: types.IFileSource) => JSX.Element
  allowedExtensions?: string[]
}

interface IFileSource {
  name: string // file name
  url: string
  size: number // size in bytes
}

Properties definition

Property	Definition
propName	The prop corresponding to this file.
renderBlock	Render function to render the document on the page. Its argument is an object with name (file name), url, and size (file size in bytes).
allowedExtensions	Array of strings representing the allowed extensions.

Allowed extensions

Allowed extensions must be a subset of the following: .pdf, .bmp, .gif, .jpg, .jpeg, .png, .svg, .tif, .tiff, .webp, .mp4, .txt, .rtf.

Extensions not listed above are not allowed, even if specified in the allowedExtensions array.