src/components/file-upload-dialog/file-upload-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { FileUpload } from "~/components/file-upload/file-upload";
   7 import { UploadFile } from '~/store/collections/uploader/collection-uploader-actions';
   8 import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core/';
   9 import { Button, CircularProgress } from '@material-ui/core';
  10 import { WithDialogProps } from '../../store/dialog/with-dialog';
  11
  12 export interface FilesUploadDialogProps {
  13     files: UploadFile[];
  14     uploading: boolean;
  15     onSubmit: () => void;
  16     onChange: (files: File[]) => void;
  17 }
  18
  19 export const FilesUploadDialog = (props: FilesUploadDialogProps & WithDialogProps<{}>) =>
  20     <Dialog open={props.open}
  21         disableBackdropClick={true}
  22         disableEscapeKeyDown={true}
  23         fullWidth={true}
  24         maxWidth='sm'>
  25         <DialogTitle>Upload data</DialogTitle>
  26         <DialogContent>
  27             <FileUpload
  28                 files={props.files}
  29                 disabled={props.uploading}
  30                 onDrop={props.onChange}
  31             />
  32         </DialogContent>
  33         <DialogActions>
  34             <Button
  35                 variant='flat'
  36                 color='primary'
  37                 disabled={props.uploading}
  38                 onClick={props.closeDialog}>
  39                 Cancel
  40             </Button>
  41             <Button
  42                 variant='contained'
  43                 color='primary'
  44                 type='submit'
  45                 onClick={props.onSubmit}
  46                 disabled={props.uploading}>
  47                 {props.uploading
  48                     ? <CircularProgress size={20} />
  49                     : 'Upload data'}
  50             </Button>
  51         </DialogActions>
  52     </Dialog>;