FREE Workshop on May 29th »
Book your seat

File Upload & Download

Sometimes, you might need to allow your website users to download a file, like a catalog, a document or a short video.

Therefore, you need a method for your editors to upload a file and for your users to download it. This can be accomplished easily using the <File/> component. Let's create a new brick with this component!

import React from 'react'
import { types, File } from 'react-bricks/frontend'
interface CatalogDownloadProps {
file: types.IFileSource
const CatalogDownload: types.Brick<CatalogDownloadProps> = ({ file }) => {
return (
renderBlock={(file) => {
return file ? (
<a href={file.url} className="flex font-semibold h-full items-center">
Download "{}" <small>({file.size.toFixed(2)} MB)</small>
) : (
<div className="flex font-semibold h-full items-center">
No catalogs yet.
CatalogDownload.schema = {
name: 'catalog-download',
label: 'Catalog Download',

You see in the code that we check if the file is already uploaded: in that case we have the file's url, name and size available on the render function's argument.

If you like, you can also provide a default file using the getDefaultProps function in the schema.

Docs reference
» File component
# Time to get points

What is the best use case for the File component?