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/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 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 catalogs 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.