diff --git a/package.json b/package.json
index e156e1c04..317ebc67d 100644
--- a/package.json
+++ b/package.json
@@ -101,6 +101,7 @@
"ohif-core": "0.9.1",
"oidc-client": "1.7.x",
"prop-types": "^15.7.2",
+ "react-dropzone": "^10.1.5",
"react-i18next": "^10.11.0",
"react-redux": "^7.1.0",
"react-resize-detector": "^4.2.0",
diff --git a/src/OHIFStandaloneViewer.js b/src/OHIFStandaloneViewer.js
index d933a5de3..c5f8bc716 100644
--- a/src/OHIFStandaloneViewer.js
+++ b/src/OHIFStandaloneViewer.js
@@ -9,6 +9,7 @@ import { ViewerbaseDragDropContext } from 'react-viewerbase';
// import asyncComponent from './components/AsyncComponent.js'
import IHEInvokeImageDisplay from './routes/IHEInvokeImageDisplay.js';
import ViewerRouting from './routes/ViewerRouting.js';
+import ViewerLocalFileData from './connectedComponents/ViewerLocalFileData.js';
import StudyListRouting from './studylist/StudyListRouting.js';
import StandaloneRouting from './routes/StandaloneRouting.js';
import CallbackPage from './routes/CallbackPage.js';
@@ -96,6 +97,10 @@ class OHIFStandaloneViewer extends Component {
* See http://reactcommunity.org/react-transition-group/with-react-router/
*/
const routes = [
+ {
+ path: '/local',
+ Component: ViewerLocalFileData,
+ },
{
path: '/viewer',
Component: StandaloneRouting,
diff --git a/src/connectedComponents/ViewerLocalFileData.css b/src/connectedComponents/ViewerLocalFileData.css
new file mode 100644
index 000000000..2e6f396fc
--- /dev/null
+++ b/src/connectedComponents/ViewerLocalFileData.css
@@ -0,0 +1,15 @@
+.drag-drop-instructions {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.drag-drop-instructions h3 {
+ color: var(--active-color);
+}
+
+.drag-drop-instructions h4 {
+ color: var(--text-secondary-color);
+}
diff --git a/src/connectedComponents/ViewerLocalFileData.js b/src/connectedComponents/ViewerLocalFileData.js
new file mode 100644
index 000000000..eb49fc2ea
--- /dev/null
+++ b/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 Error: {JSON.stringify(this.state.error)}
;
+ }
+
+ return (
+
+ {({ getRootProps, getInputProps }) => (
+
+ {this.state.studies ? (
+
a.studyInstanceUid)
+ }
+ />
+ ) : (
+
+
+ {this.state.loading ? (
+
{this.props.t('Loading...')}
+ ) : (
+ <>
+
+ {this.props.t(
+ 'Drag and Drop DICOM files here to load them in the Viewer'
+ )}
+
+
+ {this.props.t(
+ "Or click to load the browser's file selector"
+ )}
+
+
+ )}
+
+
+
Error: {JSON.stringify(this.state.error)}
;
} else if (this.state.studies === null && !this.state.modalComponentId) {
@@ -216,24 +231,44 @@ class StudyListWithData extends Component {
);
}
+ console.warn(this.state.studies);
+
const studyList = (
-
-
- {healthCareApiButtons}
- {healthCareApiWindows}
-
-
+
+ {({ getRootProps, getInputProps }) => (
+
+ {this.state.studies ? (
+
+ {healthCareApiButtons}
+ {healthCareApiWindows}
+
+ ) : (
+
+
+ {this.props.t(
+ 'Drag and Drop DICOM files here to load them in the Viewer'
+ )}
+
+
+ {this.props.t("Or click to load the browser's file selector")}
+
+
+
+ )}
+