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 { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core/';
   8 import { Button, CircularProgress } from '@material-ui/core';
   9 import { WithDialogProps } from '~/store/dialog/with-dialog';
  10 import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
  11
  12 export interface FilesUploadDialogProps {
  13     files: UploadFile[];
  14     uploading: boolean;
  15     onSubmit: () => void;
  16     onChange: (files: File[]) => void;
  17     onDelete: (files: File[]) => void;
  18 }
  19
  20 export const FilesUploadDialog = (props: FilesUploadDialogProps & WithDialogProps<{}>) =>
  21     <Dialog open={props.open}
  22         disableBackdropClick={true}
  23         disableEscapeKeyDown={true}
  24         fullWidth={true}
  25         maxWidth='sm'>
  26         <DialogTitle>Upload data</DialogTitle>
  27         <DialogContent>
  28             <FileUpload
  29                 files={props.files}
  30                 disabled={props.uploading}
  31                 onDrop={props.onChange}
  32                 onDelete={props.onDelete}
  33             />
  34         </DialogContent>
  35         <DialogActions>
  36             <Button
  37                 variant='text'
  38                 color='primary'
  39                 disabled={props.uploading}
  40                 onClick={props.closeDialog}>
  41                 Cancel
  42             </Button>
  43             <Button
  44                 variant='contained'
  45                 color='primary'
  46                 type='submit'
  47                 onClick={props.onSubmit}
  48                 disabled={props.uploading}>
  49                 {props.uploading
  50                     ? <CircularProgress size={20} />
  51                     : 'Upload data'}
  52             </Button>
  53         </DialogActions>
  54     </Dialog>;