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 (
    <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.

Docs reference

» File component

# Time to get points

What is the best use case for the File component?

« Prev Next »