---
title: Use the File component
category: Custom bricks
order: 15
status: published
summary: Let editors upload a file and render a download link using the React Bricks File component.
estimatedTime: 4 min
keywords: file upload download ifilesource download document
---

## What you'll build

In this how-to, you'll create a `CatalogDownload` brick using the React Bricks `<File>` component.

This is useful when editors need to upload downloadable assets like:

- PDFs
- catalogs
- brochures
- documents
- short videos

At the end, editors will be able to upload a file in the admin, and your brick will render a download link on the page.

## Create a new brick

Create a new `CatalogDownload.tsx` file and start with this code:

```tsx {10-25}
import { File, types } from 'react-bricks/rsc'

interface CatalogDownloadProps {
  file: types.IFileSource
}

const CatalogDownload: types.Brick<CatalogDownloadProps> = ({ file }) => {
  return (
    <div>
      <File
        propName="file"
        source={file}
        allowedExtensions={['.pdf']}
        renderBlock={(file) => {
          return file ? (
            <a
              href={file.url}
              className="flex h-full items-center font-semibold"
            >
              Download "{file.name}" <small>({file.size.toFixed(2)} MB)</small>
            </a>
          ) : (
            <div className="flex h-full items-center font-semibold">
              No catalogs yet.
            </div>
          )
        }}
      />
    </div>
  )
}

CatalogDownload.schema = {
  name: 'catalog-download',
  label: 'Catalog Download',
}

export default CatalogDownload
```

If you're using Next.js App Router, import `File` from `react-bricks/rsc`.
If you're using Astro, import it from `react-bricks/astro`.

## Add the file prop

The component interface uses:

```tsx
file: types.IFileSource
```

`types.IFileSource` is the React Bricks type for a visually editable file field.

This prop will contain the uploaded file data.

## Use the `<File>` component

Inside the brick, we render:

```tsx
<File
  propName="file"
  source={file}
  allowedExtensions={['.pdf']}
  renderBlock={(file) => {
    return file ? (
      <a href={file.url} className="flex h-full items-center font-semibold">
        Download "{file.name}" <small>({file.size.toFixed(2)} MB)</small>
      </a>
    ) : (
      <div className="flex h-full items-center font-semibold">
        No catalogs yet.
      </div>
    )
  }}
/>
```

Here is what the main props do:

- `propName="file"` binds the field to the `file` prop
- `source={file}` passes the current file value
- `allowedExtensions={['.pdf']}` limits uploads to PDF files
- `renderBlock` defines how the uploaded file should be rendered

## How `renderBlock` works

The `renderBlock` function receives the uploaded file as its argument.

If a file is available, you can use its data to render custom UI.

In this example we use:

- `file.url` for the download link
- `file.name` for the file name
- `file.size` for the size in MB

That is why the code checks:

```tsx
file ? (...) : (...)
```

When a file exists, we render a download link.
When there is no file yet, we render a placeholder message.

## Why `allowedExtensions` is useful

`allowedExtensions` helps restrict the kinds of files editors can upload.

For example:

- `['.pdf']` only allows PDF files
- `['.pdf', '.docx']` would allow both PDFs and Word documents

This is useful when the brick is meant for a very specific file type.

## Final code

Your full `CatalogDownload.tsx` file should look like this:

```tsx
import { File, types } from 'react-bricks/rsc'

interface CatalogDownloadProps {
  file: types.IFileSource
}

const CatalogDownload: types.Brick<CatalogDownloadProps> = ({ file }) => {
  return (
    <div>
      <File
        propName="file"
        source={file}
        allowedExtensions={['.pdf']}
        renderBlock={(file) => {
          return file ? (
            <a
              href={file.url}
              className="flex h-full items-center font-semibold"
            >
              Download "{file.name}" <small>({file.size.toFixed(2)} MB)</small>
            </a>
          ) : (
            <div className="flex h-full items-center font-semibold">
              No catalogs yet.
            </div>
          )
        }}
      />
    </div>
  )
}

CatalogDownload.schema = {
  name: 'catalog-download',
  label: 'Catalog Download',
}

export default CatalogDownload
```

## Default files

If you want, you can also provide a default file using `getDefaultProps` in the schema.

That can be useful if you already have a standard catalog or document you want new brick instances to start with.

## Docs reference

[File component](https://docs.reactbricks.com/api-reference/visual-components/file/)