src/views-components/file-uploader/file-uploader.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { FileUpload } from 'components/file-upload/file-upload';
   7 import { connect } from 'react-redux';
   8 import { RootState } from 'store/store';
   9 import { FileUploadProps } from '../../components/file-upload/file-upload';
  10 import { Dispatch } from 'redux';
  11 import { fileUploaderActions, getFileUploaderState } from 'store/file-uploader/file-uploader-actions';
  12 import { WrappedFieldProps } from 'redux-form';
  13 import { Typography } from '@material-ui/core';
  14
  15 export type FileUploaderProps = Pick<FileUploadProps, 'disabled' | 'onDrop'>;
  16
  17 const mapStateToProps = (state: RootState, { disabled }: FileUploaderProps): Pick<FileUploadProps, 'files' | 'disabled'> => ({
  18     disabled,
  19     files: state.fileUploader,
  20 });
  21
  22 const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps): Pick<FileUploadProps, 'onDrop' | 'onDelete'> => ({
  23     onDrop: files => {
  24         const state = dispatch<any>(getFileUploaderState());
  25         if (files.length > 0 && state.length === 0) {
  26             dispatch(fileUploaderActions.SET_UPLOAD_FILES(files));
  27             onDrop(files);
  28         } else if (files.length > 0 && state.length > 0) {
  29             dispatch(fileUploaderActions.UPDATE_UPLOAD_FILES(files));
  30             onDrop(files);
  31         }
  32     },
  33     onDelete: file => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(file)),
  34 });
  35
  36 export const FileUploader = connect(mapStateToProps, mapDispatchToProps)(FileUpload);
  37
  38 export const FileUploaderField = (props: WrappedFieldProps & { label?: string }) =>
  39     <div>
  40         <Typography variant='caption'>{props.label}</Typography>
  41         <FileUploader disabled={props.meta.submitting} onDrop={props.input.onChange} />
  42     </div>;