File Upload

Default List of files to upload

import React, { useState } from 'react'

import { FileUpload, List, ListItem } from 'playbook-ui'

const AcceptedFilesList = ({ files }) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
)

const FileUploadDefault = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([])

  const handleOnFilesAccepted = (files) => {
    setFilesToUpload([...filesToUpload, ...files])
  }

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
      />
      <FileUpload
          onFilesAccepted={handleOnFilesAccepted}
      />
    </div>
  )
}

export default FileUploadDefault

Accept only certain types of files

import React, { useState } from 'react'

import { FileUpload, List, ListItem } from 'playbook-ui'

const AcceptedFilesList = ({ files }) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
)

const FileUploadAccept = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([])

  const handleOnFilesAccepted = (files) => {
    setFilesToUpload([...filesToUpload, ...files])
  }

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
      />
      <FileUpload
          accept={{
            "image/svg+xml": [".svg", ".xml"],
          }}
          onFilesAccepted={handleOnFilesAccepted}
      />
    </div>
  )
}

export default FileUploadAccept

Add a custom message

import React, { useState } from 'react'

import { FileUpload, List, ListItem } from 'playbook-ui'

const AcceptedFilesList = ({ files }) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
)

const FileUploadCustomMessage = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([])

  const handleOnFilesAccepted = (files) => {
    setFilesToUpload([...filesToUpload, ...files])
  }

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
      />
      <FileUpload
          customMessage="Playbook is awesome!"
          onFilesAccepted={handleOnFilesAccepted}
      />
    </div>
  )
}

export default FileUploadCustomMessage

Add your one accepted files description

Sometimes you may want to create a custom description that is easier for users to read. In this case, you can use the acceptedFilesDescription prop.

/* eslint-disable react/no-multi-comp */

import React, { useState } from "react";

import { FileUpload, List, ListItem } from 'playbook-ui'

const AcceptedFilesList = ({ files }) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
);

const FileUploadCustomDescription = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([]);

  const handleOnFilesAccepted = (files) => {
    setFilesToUpload([...filesToUpload, ...files]);
  };

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
      />
      <FileUpload
          accept={{
            "application/pdf": [".pdf"],
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
          }}
          acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
          onFilesAccepted={handleOnFilesAccepted}
      />
    </div>
  );
};

export default FileUploadCustomDescription;

Set a file size limit

/* eslint-disable react/no-multi-comp */

import React, { useState } from 'react'

import { Body, FileUpload, List, ListItem } from 'playbook-ui'

const AcceptedFilesList = ({ files }) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
)
const RejectedFilesList = ({ files }) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.file.name}><Body color="error">{`${file.file.name} (file too large)`}</Body></ListItem>
    ))}
  </List>
)

const FileUploadMaxSize = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([])
  const [filesRejected, setFilesRejected] = useState([])
  const [error, setError] = useState()

  const handleOnFilesAccepted = (files) => {
    if (files.length) setError()
    setFilesToUpload([...filesToUpload, ...files])
  }

  const handleOnFilesRejected = (error, files) => {
    setError(error)
    setFilesRejected([...filesRejected, ...files])
  }

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
      />
      <RejectedFilesList
          files={filesRejected}
      />
      <FileUpload
          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
          maxSize={1000000}
          onFilesAccepted={handleOnFilesAccepted}
          onFilesRejected={handleOnFilesRejected}
      />
      { error && (
        <Body
            color="error"
            marginY="md"
        >
          {error}
        </Body>
      )}
    </div>
  )
}

export default FileUploadMaxSize

Error

import React, { useState } from 'react'

import { FileUpload, List, ListItem, Icon } from 'playbook-ui'

const AcceptedFilesList = ({ files }) => (
  <List>
    {files.map((file) => (
      <ListItem key={file.name}>{file.name}</ListItem>
    ))}
  </List>
)

const FileUploadError = (props) => {
  const [filesToUpload, setFilesToUpload] = useState([])

  const handleOnFilesAccepted = (files) => {
    setFilesToUpload([...filesToUpload, ...files])
  }

  const error = (<>
    <Icon icon="warning" /> Please upload a valid file
  </>)

  return (
    <div>
      <AcceptedFilesList
          files={filesToUpload}
      />
      <FileUpload
          error={error}
          onFilesAccepted={handleOnFilesAccepted}
      />
    </div>
  )
}

export default FileUploadError

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat