File Upload & Download

Sometimes you need a way to let your users donwload a file: think for example of catalogs. So you need a way for your editors to upload a file and for your users to download it. You can easily do it using the<File/> component. Let's create a new brick with it!

import React from 'react'
import { types, File } from 'react-bricks/frontend'
const CatalogDownload: types.Brick = () => {
return (
<div>
<File
propName="file"
allowedExtensions={['']}
renderBlock={(file) => {
return file ? (
<a href={file.url} className="flex font-semibold h-full items-center">
Download "{file.name}" <small>({file.size.toFixed(2)} MB)</small>
</a>
) : (
<div className="flex font-semibold h-full items-center">
No catalog yet.
</div>
)
}}
/>
</div>
)
}
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?

Subscribe to our newsletter!

Be the first to discover our latest news. No spam, promise.