feat(ViewerLocalFileData): Add drag/drop to load DICOM files in the Viewer at /local (#644)

src/connectedComponents/ViewerLocalFileData.js

@@ -0,0 +1,117 @@
+import React, { Component } from 'react';
+import { metadata, utils } from 'ohif-core';
+
+import ConnectedViewer from './ConnectedViewer.js';
+import PropTypes from 'prop-types';
+import { extensionManager } from './../App.js';
+import Dropzone from 'react-dropzone';
+import filesToStudies from '../lib/filesToStudies';
+import './ViewerLocalFileData.css';
+import { withTranslation } from 'react-i18next';
+
+const { OHIFStudyMetadata } = metadata;
+const { studyMetadataManager, updateMetaDataManager } = utils;
+
+class ViewerLocalFileData extends Component {
+  static propTypes = {
+    studies: PropTypes.array,
+  };
+
+  state = {
+    studies: null,
+    loading: false,
+    error: null,
+  };
+
+  updateStudies = studies => {
+    // Render the viewer when the data is ready
+    studyMetadataManager.purge();
+
+    // Map studies to new format, update metadata manager?
+    const updatedStudies = studies.map(study => {
+      const studyMetadata = new OHIFStudyMetadata(
+        study,
+        study.studyInstanceUid
+      );
+      const sopClassHandlerModules =
+        extensionManager.modules['sopClassHandlerModule'];
+
+      study.displaySets =
+        study.displaySets ||
+        studyMetadata.createDisplaySets(sopClassHandlerModules);
+      studyMetadata.setDisplaySets(study.displaySets);
+
+      // Updates WADO-RS metaDataManager
+      updateMetaDataManager(study);
+
+      studyMetadataManager.add(studyMetadata);
+
+      return study;
+    });
+
+    this.setState({
+      studies: updatedStudies,
+    });
+  };
+
+  render() {
+    const onDrop = async acceptedFiles => {
+      this.setState({ loading: true });
+
+      const studies = await filesToStudies(acceptedFiles);
+      const updatedStudies = this.updateStudies(studies);
+
+      if (!updatedStudies) {
+        return;
+      }
+
+      this.setState({ studies: updatedStudies, loading: false });
+    };
+
+    if (this.state.error) {
+      return <div>Error: {JSON.stringify(this.state.error)}</div>;
+    }
+
+    return (
+      <Dropzone onDrop={onDrop}>
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
+            {this.state.studies ? (
+              <ConnectedViewer
+                studies={this.state.studies}
+                studyInstanceUids={
+                  this.state.studies &&
+                  this.state.studies.map(a => a.studyInstanceUid)
+                }
+              />
+            ) : (
+              <div className={'drag-drop-instructions'}>
+                <div className={'drag-drop-contents'}>
+                  {this.state.loading ? (
+                    <h3>{this.props.t('Loading...')}</h3>
+                  ) : (
+                    <>
+                      <h3>
+                        {this.props.t(
+                          'Drag and Drop DICOM files here to load them in the Viewer'
+                        )}
+                      </h3>
+                      <h4>
+                        {this.props.t(
+                          "Or click to load the browser's file selector"
+                        )}
+                      </h4>
+                    </>
+                  )}
+                </div>
+                <input {...getInputProps()} style={{ display: 'none' }} />
+              </div>
+            )}
+          </div>
+        )}
+      </Dropzone>
+    );
+  }
+}
+
+export default withTranslation('Common')(ViewerLocalFileData);