Merge branch 'master'
[arvados-workbench2.git] / 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>;