import * as React from 'react';
import { FileUpload } from "~/components/file-upload/file-upload";
-import { UploadFile } from '~/store/collections/uploader/collection-uploader-actions';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core/';
import { Button, CircularProgress } from '@material-ui/core';
-import { WithDialogProps } from '../../store/dialog/with-dialog';
+import { WithDialogProps } from '~/store/dialog/with-dialog';
+import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
export interface FilesUploadDialogProps {
files: UploadFile[];
import Dropzone from 'react-dropzone';
import { CloudUploadIcon } from "../icon/icon";
import { formatFileSize, formatProgress, formatUploadSpeed } from "~/common/formatters";
-import { UploadFile } from "~/store/collections/uploader/collection-uploader-actions";
+import { UploadFile } from '~/store/file-uploader/file-uploader-actions';
type CssRules = "root" | "dropzone" | "container" | "uploadIcon";
}
});
-interface FileUploadProps {
+export interface FileUploadProps {
files: UploadFile[];
disabled: boolean;
onDrop: (files: File[]) => void;
export const FileUpload = withStyles(styles)(
({ classes, files, disabled, onDrop }: FileUploadProps & WithStyles<CssRules>) =>
- <Grid container direction={"column"}>
- <Typography variant={"subheading"}>
- Upload data
- </Typography>
<Dropzone className={classes.dropzone} onDrop={files => onDrop(files)} disabled={disabled}>
{files.length === 0 &&
- <Grid container justify="center" alignItems="center" className={classes.container}>
- <Grid item component={"span"}>
- <Typography variant={"subheading"}>
- <CloudUploadIcon className={classes.uploadIcon}/> Drag and drop data or click to browse
+ <Grid container justify="center" alignItems="center" className={classes.container}>
+ <Grid item component={"span"}>
+ <Typography variant={"subheading"}>
+ <CloudUploadIcon className={classes.uploadIcon} /> Drag and drop data or click to browse
</Typography>
- </Grid>
- </Grid>}
+ </Grid>
+ </Grid>}
{files.length > 0 &&
- <Table style={{width: "100%"}}>
+ <Table style={{ width: "100%" }}>
<TableHead>
<TableRow>
<TableCell>File name</TableCell>
</TableRow>
</TableHead>
<TableBody>
- {files.map(f =>
- <TableRow key={f.id}>
- <TableCell>{f.file.name}</TableCell>
- <TableCell>{formatFileSize(f.file.size)}</TableCell>
- <TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
- <TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
- </TableRow>
- )}
+ {files.map(f =>
+
<TableCell>{f.file.name}</TableCell>
+
<TableCell>{formatFileSize(f.file.size)}</TableCell>
+
<TableCell>{formatUploadSpeed(f.prevLoaded, f.loaded, f.prevTime, f.currentTime)}</TableCell>
+
<TableCell>{formatProgress(f.loaded, f.total)}</TableCell>
+ </TableRow>
+ )}
</TableBody>
</Table>
}
</Dropzone>
- </Grid>
);
import { Dispatch } from "redux";
import { reset, startSubmit, stopSubmit, initialize } from 'redux-form';
import { RootState } from '~/store/store';
-import { uploadCollectionFiles } from '~/store/collections/uploader/collection-uploader-actions';
import { dialogActions } from "~/store/dialog/dialog-actions";
-import { CollectionResource } from '~/models/collection';
import { ServiceRepository } from '~/services/services';
import { getCommonResourceServiceError, CommonResourceServiceError } from "~/common/api/common-resource-service";
+import { uploadCollectionFiles } from './collection-upload-actions';
+import { fileUploaderActions } from '~/store/file-uploader/file-uploader-actions';
export interface CollectionCreateFormDialogData {
ownerUuid: string;
name: string;
description: string;
- files: File[];
}
export const COLLECTION_CREATE_FORM_NAME = "collectionCreateFormName";
export const openCollectionCreateDialog = (ownerUuid: string) =>
(dispatch: Dispatch) => {
dispatch(initialize(COLLECTION_CREATE_FORM_NAME, { ownerUuid }));
+ dispatch(fileUploaderActions.CLEAR_UPLOAD());
dispatch(dialogActions.OPEN_DIALOG({ id: COLLECTION_CREATE_FORM_NAME, data: { ownerUuid } }));
};
-export const createCollection = (collection: Partial<CollectionResource>) =>
+export const createCollection = (data: CollectionCreateFormDialogData) =>
async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
dispatch(startSubmit(COLLECTION_CREATE_FORM_NAME));
try {
- const newCollection = await services.collectionService.create(collection);
+ const newCollection = await services.collectionService.create(data);
await dispatch<any>(uploadCollectionFiles(newCollection.uuid));
dispatch(dialogActions.CLOSE_DIALOG({ id: COLLECTION_CREATE_FORM_NAME }));
dispatch(reset(COLLECTION_CREATE_FORM_NAME));
}
return ;
}
- };
\ No newline at end of file
+ };
-// Copyright (C) The Arvados Authors. All rights reserved.\r
-//\r
-// SPDX-License-Identifier: AGPL-3.0\r
-\r
-import { unionize, ofType, UnionOf } from "~/common/unionize";\r
-import { Dispatch } from 'redux';\r
-import { RootState } from '~/store/store';\r
-import { ServiceRepository } from '~/services/services';\r
-import { dialogActions } from '~/store/dialog/dialog-actions';\r
-import { loadCollectionFiles } from '../../collection-panel/collection-panel-files/collection-panel-files-actions';\r
-import { snackbarActions } from "~/store/snackbar/snackbar-actions";\r
-\r
-export interface UploadFile {\r
- id: number;\r
- file: File;\r
- prevLoaded: number;\r
- loaded: number;\r
- total: number;\r
- startTime: number;\r
- prevTime: number;\r
- currentTime: number;\r
-}\r
-\r
-export const collectionUploaderActions = unionize({\r
- SET_UPLOAD_FILES: ofType<File[]>(),\r
- START_UPLOAD: ofType(),\r
- SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),\r
- CLEAR_UPLOAD: ofType()\r
-});\r
-\r
-export type CollectionUploaderAction = UnionOf<typeof collectionUploaderActions>;\r
-\r
-export const uploadCollectionFiles = (collectionUuid: string) =>\r
- async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {\r
- dispatch(collectionUploaderActions.START_UPLOAD());\r
- const files = getState().collections.uploader.map(file => file.file);\r
- await services.collectionService.uploadFiles(collectionUuid, files, handleUploadProgress(dispatch));\r
- dispatch(collectionUploaderActions.CLEAR_UPLOAD());\r
- };\r
-\r
-\r
-export const uploadCurrentCollectionFiles = () =>\r
- async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {\r
- const currentCollection = getState().collectionPanel.item;\r
- if (currentCollection) {\r
- await dispatch<any>(uploadCollectionFiles(currentCollection.uuid));\r
- dispatch<any>(loadCollectionFiles(currentCollection.uuid));\r
- dispatch(closeUploadCollectionFilesDialog());\r
- dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Data has been uploaded.', hideDuration: 2000 }));\r
- }\r
- };\r
-\r
-export const UPLOAD_COLLECTION_FILES_DIALOG = 'uploadCollectionFilesDialog';\r
-export const openUploadCollectionFilesDialog = () => (dispatch: Dispatch) => {\r
- dispatch(collectionUploaderActions.CLEAR_UPLOAD());\r
- dispatch<any>(dialogActions.OPEN_DIALOG({ id: UPLOAD_COLLECTION_FILES_DIALOG, data: {} }));\r
-};\r
-\r
-export const closeUploadCollectionFilesDialog = () => dialogActions.CLOSE_DIALOG({ id: UPLOAD_COLLECTION_FILES_DIALOG });\r
-\r
-const handleUploadProgress = (dispatch: Dispatch) => (fileId: number, loaded: number, total: number, currentTime: number) => {\r
- dispatch(collectionUploaderActions.SET_UPLOAD_PROGRESS({ fileId, loaded, total, currentTime }));\r
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { Dispatch } from 'redux';
+import { RootState } from '~/store/store';
+import { ServiceRepository } from '~/services/services';
+import { dialogActions } from '~/store/dialog/dialog-actions';
+import { loadCollectionFiles } from '../collection-panel/collection-panel-files/collection-panel-files-actions';
+import { snackbarActions } from '~/store/snackbar/snackbar-actions';
+import { fileUploaderActions } from '~/store/file-uploader/file-uploader-actions';
+import { reset } from 'redux-form';
+
+export const uploadCollectionFiles = (collectionUuid: string) =>
+ async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ dispatch(fileUploaderActions.START_UPLOAD());
+ const files = getState().fileUploader.map(file => file.file);
+ await services.collectionService.uploadFiles(collectionUuid, files, handleUploadProgress(dispatch));
+ dispatch(fileUploaderActions.CLEAR_UPLOAD());
+ };
+
+export const UPLOAD_COLLECTION_FILES_DIALOG = 'uploadCollectionFilesDialog';
+
+export const openUploadCollectionFilesDialog = () => (dispatch: Dispatch) => {
+ dispatch(reset(UPLOAD_COLLECTION_FILES_DIALOG));
+ dispatch(fileUploaderActions.CLEAR_UPLOAD());
+ dispatch<any>(dialogActions.OPEN_DIALOG({ id: UPLOAD_COLLECTION_FILES_DIALOG, data: {} }));
+};
+
+export const uploadCurrentCollectionFiles = () =>
+ async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ const currentCollection = getState().collectionPanel.item;
+ if (currentCollection) {
+ await dispatch<any>(uploadCollectionFiles(currentCollection.uuid));
+ dispatch<any>(loadCollectionFiles(currentCollection.uuid));
+ dispatch(closeUploadCollectionFilesDialog());
+ dispatch(snackbarActions.OPEN_SNACKBAR({ message: 'Data has been uploaded.', hideDuration: 2000 }));
+ }
+ };
+
+export const closeUploadCollectionFilesDialog = () => dialogActions.CLOSE_DIALOG({ id: UPLOAD_COLLECTION_FILES_DIALOG });
+
+const handleUploadProgress = (dispatch: Dispatch) => (fileId: number, loaded: number, total: number, currentTime: number) => {
+ dispatch(fileUploaderActions.SET_UPLOAD_PROGRESS({ fileId, loaded, total, currentTime }));
};
\ No newline at end of file
+++ /dev/null
-// Copyright (C) The Arvados Authors. All rights reserved.
-//
-// SPDX-License-Identifier: AGPL-3.0
-
-import { combineReducers } from 'redux';
-import { collectionUploaderReducer, CollectionUploaderState } from "./uploader/collection-uploader-reducer";
-
-export type CollectionsState = {
- uploader: CollectionUploaderState
-};
-
-export const collectionsReducer = combineReducers({
- uploader: collectionUploaderReducer
-});
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { unionize, ofType, UnionOf } from "~/common/unionize";
+
+export interface UploadFile {
+ id: number;
+ file: File;
+ prevLoaded: number;
+ loaded: number;
+ total: number;
+ startTime: number;
+ prevTime: number;
+ currentTime: number;
+}
+
+export const fileUploaderActions = unionize({
+ CLEAR_UPLOAD: ofType(),
+ SET_UPLOAD_FILES: ofType<File[]>(),
+ SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),
+ START_UPLOAD: ofType(),
+});
+
+export type FileUploaderAction = UnionOf<typeof fileUploaderActions>;
//
// SPDX-License-Identifier: AGPL-3.0
-import { CollectionUploaderAction, collectionUploaderActions, UploadFile } from "./collection-uploader-actions";
+import { UploadFile, fileUploaderActions, FileUploaderAction } from "./file-uploader-actions";
-export type CollectionUploaderState = UploadFile[];
+export type UploaderState = UploadFile[];
-const initialState: CollectionUploaderState = [];
+const initialState: UploaderState = [];
-export const collectionUploaderReducer = (state: CollectionUploaderState = initialState, action: CollectionUploaderAction) => {
- return collectionUploaderActions.match(action, {
+export const fileUploaderReducer = (state: UploaderState = initialState, action: FileUploaderAction) => {
+ return fileUploaderActions.match(action, {
SET_UPLOAD_FILES: files => files.map((f, idx) => ({
id: idx,
file: f,
import { FavoritePanelMiddlewareService } from "./favorite-panel/favorite-panel-middleware-service";
import { collectionPanelReducer } from './collection-panel/collection-panel-reducer';
import { dialogReducer } from './dialog/dialog-reducer';
-import { collectionsReducer } from './collections/collections-reducer';
import { ServiceRepository } from "~/services/services";
import { treePickerReducer } from './tree-picker/tree-picker-reducer';
import { resourcesReducer } from '~/store/resources/resources-reducer';
import { propertiesReducer } from './properties/properties-reducer';
import { RootState } from './store';
+import { fileUploaderReducer } from './file-uploader/file-uploader-reducer';
const composeEnhancers =
(process.env.NODE_ENV === 'development' &&
const createRootReducer = (services: ServiceRepository) => combineReducers({
auth: authReducer(services),
- collections: collectionsReducer,
- router: routerReducer,
- dataExplorer: dataExplorerReducer,
collectionPanel: collectionPanelReducer,
- detailsPanel: detailsPanelReducer,
+ collectionPanelFiles: collectionPanelFilesReducer,
contextMenu: contextMenuReducer,
- form: formReducer,
+ dataExplorer: dataExplorerReducer,
+ detailsPanel: detailsPanelReducer,
+ dialog: dialogReducer,
favorites: favoritesReducer,
+ form: formReducer,
+ properties: propertiesReducer,
+ resources: resourcesReducer,
+ router: routerReducer,
snackbar: snackbarReducer,
- collectionPanelFiles: collectionPanelFilesReducer,
- dialog: dialogReducer,
treePicker: treePickerReducer,
- resources: resourcesReducer,
- properties: propertiesReducer,
+ fileUploader: fileUploaderReducer,
});
import { FileTreeData } from "~/components/file-tree/file-tree-data";
import { Dispatch } from "redux";
import { collectionPanelFilesAction } from "~/store/collection-panel/collection-panel-files/collection-panel-files-actions";
-import { contextMenuActions } from "~/store/context-menu/context-menu-actions";
import { ContextMenuKind } from "../context-menu/context-menu";
import { Tree, getNodeChildrenIds, getNode } from "~/models/tree";
import { CollectionFileType } from "~/models/collection-file";
-import { openUploadCollectionFilesDialog } from '~/store/collections/uploader/collection-uploader-actions';
-import { openContextMenu } from '../../store/context-menu/context-menu-actions';
+import { openContextMenu } from '~/store/context-menu/context-menu-actions';
+import { openUploadCollectionFilesDialog } from '~/store/collections/collection-upload-actions';
const memoizedMapStateToProps = () => {
let prevState: CollectionPanelFilesState;
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { InjectedFormProps } from 'redux-form';
+import { InjectedFormProps, Field } from 'redux-form';
import { WithDialogProps } from '~/store/dialog/with-dialog';
import { CollectionCreateFormDialogData } from '~/store/collections/collection-create-actions';
-import { collectionUploaderActions, UploadFile } from "~/store/collections/uploader/collection-uploader-actions";
import { FormDialog } from '~/components/form-dialog/form-dialog';
import { CollectionNameField, CollectionDescriptionField } from '~/views-components/form-fields/collection-form-fields';
-import { FileUpload } from '~/components/file-upload/file-upload';
+import { require } from '~/validators/require';
+import { FileUploaderField } from '../file-uploader/file-uploader';
-// interface DialogCollectionDataProps {
-// open: boolean;
-// handleSubmit: any;
-// submitting: boolean;
-// invalid: boolean;
-// pristine: boolean;
-// files: UploadFile[];
-// }
type DialogCollectionProps = WithDialogProps<{}> & InjectedFormProps<CollectionCreateFormDialogData>;
const CollectionAddFields = () => <span>
<CollectionNameField />
<CollectionDescriptionField />
- {/* <FileUpload
- files={this.props.files}
- disabled={busy}
- onDrop={files => this.props.dispatch(collectionUploaderActions.SET_UPLOAD_FILES(files))} /> */}
-</span>;
\ No newline at end of file
+ <Field
+ name='files'
+ validate={[require]}
+ label='Files'
+ component={FileUploaderField} />
+</span>;
+
--- /dev/null
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { FileUpload } from '~/components/file-upload/file-upload';
+import { connect } from 'react-redux';
+import { RootState } from '~/store/store';
+import { FileUploadProps } from '../../components/file-upload/file-upload';
+import { Dispatch } from 'redux';
+import { fileUploaderActions } from '~/store/file-uploader/file-uploader-actions';
+import { WrappedFieldProps } from 'redux-form';
+import { Typography } from '@material-ui/core';
+
+export type FileUploaderProps = Pick<FileUploadProps, 'disabled' | 'onDrop'>;
+
+const mapStateToProps = (state: RootState, { disabled }: FileUploaderProps): Pick<FileUploadProps, 'files' | 'disabled'> => ({
+ disabled,
+ files: state.fileUploader,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch, { onDrop }: FileUploaderProps): Pick<FileUploadProps, 'onDrop'> => ({
+ onDrop: files => {
+ dispatch(fileUploaderActions.SET_UPLOAD_FILES(files));
+ onDrop(files);
+ },
+});
+
+export const FileUploader = connect(mapStateToProps, mapDispatchToProps)(FileUpload);
+
+export const FileUploaderField = (props: WrappedFieldProps & { label?: string }) =>
+ <div>
+ <Typography variant='caption'>{props.label}</Typography>
+ <FileUploader disabled={props.meta.submitting} onDrop={props.input.onChange} />
+ </div>;
import { Dispatch, compose } from "redux";
import { withDialog } from '~/store/dialog/with-dialog';
import { FilesUploadDialog } from '~/components/file-upload-dialog/file-upload-dialog';
-import { RootState } from '../../store/store';
-import { uploadCurrentCollectionFiles, UPLOAD_COLLECTION_FILES_DIALOG, collectionUploaderActions } from '~/store/collections/uploader/collection-uploader-actions';
+import { RootState } from '~/store/store';
+import { UPLOAD_COLLECTION_FILES_DIALOG, uploadCurrentCollectionFiles } from '~/store/collections/collection-upload-actions';
+import { fileUploaderActions } from '~/store/file-uploader/file-uploader-actions';
const mapStateToProps = (state: RootState) => ({
- files: state.collections.uploader,
- uploading: state.collections.uploader.some(file => file.loaded < file.total)
+ files: state.fileUploader,
+ uploading: state.fileUploader.some(file => file.loaded < file.total)
});
const mapDispatchToProps = (dispatch: Dispatch) => ({
dispatch<any>(uploadCurrentCollectionFiles());
},
onChange: (files: File[]) => {
- dispatch(collectionUploaderActions.SET_UPLOAD_FILES(files));
+ dispatch(fileUploaderActions.SET_UPLOAD_FILES(files));
}
});
projects / arvados-workbench2.git / commitdiff