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><FilepropName="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.
Be the first to discover our latest news. No spam, promise.