File Upload

This kit provides a drag and drop interface for file uploads. Currently, the kit leverages react-dropzone.

Props

accept: [String] Use this prop to set the list of valid file types
onFilesAccepted: Function The callback function, providing the list of dropped files

Default List of files to upload

Code Example

/* @flow */

import React, { useState } from 'react'
import {
  FileUpload,
  List,
  ListItem,
} from '../..'

const AcceptedFilesList = ({ files }: FileList) => (
  <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}
          {...props}
      />
      <FileUpload
          onFilesAccepted={handleOnFilesAccepted}
          {...props}
      />
    </div>
  )
}

export default FileUploadDefault

Accept only certain types of files

Code Example

/* @flow */

import React, { useState } from 'react'
import {
  FileUpload,
  List,
  ListItem,
} from '../..'

const AcceptedFilesList = ({ files }: FileList) => (
  <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}
          {...props}
      />
      <FileUpload
          accept={['image/svg+xml']}
          onFilesAccepted={handleOnFilesAccepted}
          {...props}
      />
    </div>
  )
}

export default FileUploadAccept

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.

Code Example

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

import React, { useState } from "react";
import { FileUpload, List, ListItem } from "../..";

const AcceptedFilesList = ({ files }: FileList) => (
  <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}
          {...props}
      />
      <FileUpload
          accept={['application/pdf','application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
          acceptedFilesDescription="Adobe (.pdf) and Microsoft (.xslx)"
          onFilesAccepted={handleOnFilesAccepted}
          {...props}
      />
    </div>
  );
};

export default FileUploadCustomDescription;