Contact salesLog in
Try for free
Lessons
0 points
Tweet|Claim your prize

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?

« PrevNext »

Subscribe to our newsletter!

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