.npmrc
src/lib/cwl-svg/*
tools/arvados_config.yml
+cypress/fixtures/files/5mb.bin
.contains(adminUser.user.uuid);
});
});
+
+ describe('file upload', () => {
+ beforeEach(() => {
+ cy.createCollection(adminUser.token, {
+ name: `Test collection ${Math.floor(Math.random() * 999999)}`,
+ owner_uuid: activeUser.user.uuid,
+ manifest_text: ". 37b51d194a7513e45b56f6524f2d51f2+3 0:3:bar\n"
+ })
+ .as('testCollection1');
+ });
+
+ it('allows to cancel running upload', () => {
+ cy.getAll('@testCollection1')
+ .then(function([testCollection1]) {
+ cy.loginAs(activeUser);
+
+ cy.goToPath(`/collections/${testCollection1.uuid}`);
+
+ cy.get('[data-cy=upload-button]').click();
+
+ cy.fixture('files/5mb.bin', 'base64').then(content => {
+ cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_a.bin');
+ cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_b.bin');
+
+ cy.get('[data-cy=form-submit-btn]').click();
+
+ cy.get('button').contains('Cancel').click();
+
+ cy.get('[data-cy=form-submit-btn]').should('not.exist');
+ });
+ });
+ });
+
+ it('allows to cancel single file from the running upload', () => {
+ cy.getAll('@testCollection1')
+ .then(function([testCollection1]) {
+ cy.loginAs(activeUser);
+
+ cy.goToPath(`/collections/${testCollection1.uuid}`);
+
+ cy.get('[data-cy=upload-button]').click();
+
+ cy.fixture('files/5mb.bin', 'base64').then(content => {
+ cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_a.bin');
+ cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_b.bin');
+
+ cy.get('[data-cy=form-submit-btn]').click();
+
+ cy.get('button[aria-label=Remove]').eq(1).click();
+
+ cy.get('[data-cy=form-submit-btn]').should('not.exist');
+
+ cy.get('[data-cy=collection-files-panel]').contains('5mb_a.bin').should('exist');
+ });
+ });
+ });
+
+ it('allows to cancel all files from the running upload', () => {
+ cy.getAll('@testCollection1')
+ .then(function([testCollection1]) {
+ cy.loginAs(activeUser);
+
+ cy.goToPath(`/collections/${testCollection1.uuid}`);
+
+ cy.get('[data-cy=upload-button]').click();
+
+ cy.fixture('files/5mb.bin', 'base64').then(content => {
+ cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_a.bin');
+ cy.get('[data-cy=drag-and-drop]').upload(content, '5mb_b.bin');
+
+ cy.get('[data-cy=form-submit-btn]').click();
+
+ cy.get('button[aria-label=Remove]').click({ multiple: true });
+
+ cy.get('[data-cy=form-submit-btn]').should('not.exist');
+ });
+ });
+ });
+ });
})
cy.addToFavorites(user.token, user.user.uuid, project.uuid);
}
});
-});
\ No newline at end of file
+});
+
+Cypress.Commands.add(
+ 'upload',
+ {
+ prevSubject: 'element',
+ },
+ (subject, file, fileName) => {
+ cy.window().then(window => {
+ const blob = b64toBlob(file, '', 512);
+ const testFile = new window.File([blob], fileName);
+
+ cy.wrap(subject).trigger('drop', {
+ dataTransfer: { files: [testFile] },
+ });
+ })
+ }
+)
+
+function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
+ const byteCharacters = atob(b64Data)
+ const byteArrays = []
+
+ for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+ const slice = byteCharacters.slice(offset, offset + sliceSize);
+
+ const byteNumbers = new Array(slice.length);
+ for (let i = 0; i < slice.length; i++) {
+ byteNumbers[i] = slice.charCodeAt(i);
+ }
+
+ const byteArray = new Uint8Array(byteNumbers);
+
+ byteArrays.push(byteArray);
+ }
+
+ const blob = new Blob(byteArrays, { type: contentType });
+ return blob
+}
\ No newline at end of file
.keys(headers)
.forEach(key => r.setRequestHeader(key, headers[key]));
+ if (!(window as any).cancelTokens) {
+ Object.assign(window, { cancelTokens: {} });
+ }
+
+ (window as any).cancelTokens[config.url] = () => {
+ resolve(r);
+ r.abort();
+ }
+
if (config.onUploadProgress) {
r.upload.addEventListener('progress', config.onUploadProgress);
}
<Button
className={classes.uploadButton}
data-cy='upload-button'
- onClick={onUploadDataClick}
+ onClick={() => {
+ if (!collectionAutofetchEnabled) {
+ setCollectionAutofetchEnabled(true);
+ }
+ onUploadDataClick();
+ }}
variant='contained'
color='primary'
size='small'>
if (!disabled) {
onDelete(file);
}
+
+ let interval = setInterval(() => {
+ const key = Object.keys((window as any).cancelTokens).find(key => key.indexOf(file.file.name) > -1);
+
+ if (key) {
+ clearInterval(interval);
+ (window as any).cancelTokens[key]();
+ delete (window as any).cancelTokens[key];
+ }
+ }, 100);
+
}
render() {
const { classes, onDrop, disabled, files } = this.props;
inputs[0].focus();
}
}}
+ data-cy="drag-and-drop"
disabled={disabled}
inputProps={{
onFocus: () => {
dialogTitle: string;
formFields: React.ComponentType<InjectedFormProps<any> & WithDialogProps<any>>;
submitLabel?: string;
+ cancelCallback?: Function;
enableWhenPristine?: boolean;
+ doNotDisableCancel?: boolean;
}
type DialogProjectProps = DialogProjectDataProps & WithDialogProps<{}> & InjectedFormProps<any> & WithStyles<CssRules>;
<DialogActions className={props.classes.dialogActions}>
<Button
data-cy='form-cancel-btn'
- onClick={props.closeDialog}
+ onClick={() => {
+ props.closeDialog();
+
+ if (props.cancelCallback) {
+ props.cancelCallback();
+ props.reset();
+ props.initialize({});
+ }
+ }}
className={props.classes.button}
color="primary"
- disabled={props.submitting}>
+ disabled={props.doNotDisableCancel ? false : props.submitting}>
{props.cancelLabel || 'Cancel'}
</Button>
<Button
},
onUploadProgress: (e: ProgressEvent) => {
onProgress(fileId, e.loaded, e.total, Date.now());
- }
+ },
};
return this.webdavClient.upload(fileURL, [file], requestConfig);
}
import { collectionPanelFilesAction } from 'store/collection-panel/collection-panel-files/collection-panel-files-actions';
import { createTree } from 'models/tree';
import { loadCollectionPanel } from '../collection-panel/collection-panel-action';
+import * as WorkbenchActions from 'store/workbench/workbench-actions';
export const uploadCollectionFiles = (collectionUuid: string) =>
- async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+ async (dispatch: Dispatch<any>, 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(WorkbenchActions.loadCollection(collectionUuid));
dispatch(fileUploaderActions.CLEAR_UPLOAD());
};
SET_UPLOAD_PROGRESS: ofType<{ fileId: number, loaded: number, total: number, currentTime: number }>(),
START_UPLOAD: ofType(),
DELETE_UPLOAD_FILE: ofType<UploadFile>(),
+ CANCEL_FILES_UPLOAD: ofType(),
});
export type FileUploaderAction = UnionOf<typeof fileUploaderActions>;
return updatedState;
},
+ CANCEL_FILES_UPLOAD: () => {
+ state.forEach((file) => {
+ let interval = setInterval(() => {
+ const key = Object.keys((window as any).cancelTokens).find(key => key.indexOf(file.file.name) > -1);
+
+ if (key) {
+ clearInterval(interval);
+ (window as any).cancelTokens[key]();
+ delete (window as any).cancelTokens[key];
+ }
+ }, 100);
+ });
+
+ return [];
+ },
START_UPLOAD: () => {
const startTime = Date.now();
return state.map(f => ({ ...f, startTime, prevTime: startTime }));
import { require } from 'validators/require';
import { FileUploaderField } from 'views-components/file-uploader/file-uploader';
import { WarningCollection } from 'components/warning-collection/warning-collection';
+import { fileUploaderActions } from 'store/file-uploader/file-uploader-actions';
+import { progressIndicatorActions } from 'store/progress-indicator/progress-indicator-actions';
type DialogCollectionFilesUploadProps = WithDialogProps<{}> & InjectedFormProps<CollectionCreateFormDialogData>;
-export const DialogCollectionFilesUpload = (props: DialogCollectionFilesUploadProps) =>
- <FormDialog
+export const DialogCollectionFilesUpload = (props: DialogCollectionFilesUploadProps) => {
+
+ return <FormDialog
dialogTitle='Upload data'
formFields={UploadCollectionFilesFields}
submitLabel='Upload data'
+ doNotDisableCancel
+ cancelCallback={() => {
+ const { submitting, dispatch } = (props as any);
+
+ if (submitting) {
+ dispatch(progressIndicatorActions.STOP_WORKING('uploadCollectionFilesDialog'));
+ dispatch(fileUploaderActions.CANCEL_FILES_UPLOAD());
+ dispatch(fileUploaderActions.CLEAR_UPLOAD());
+ }
+ }}
{...props}
/>;
+}
const UploadCollectionFilesFields = () => <>
<Field
onDrop(files);
}
},
- onDelete: file => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(file)),
+ onDelete: file => dispatch(fileUploaderActions.DELETE_UPLOAD_FILE(file))
});
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} />
+ <FileUploader disabled={false} onDrop={props.input.onChange} />
</div>;
projects / arvados-workbench2.git / commitdiff