Content Preview UI Element doesn't display file content in ReactJS created with create-react-app
AnsweredI create a reactjs project with npx create-react-app my-app. I've install the necessary packages and dependencies:
- npx create-react-app my-app
- navigate to my-app folder
- npm install box-ui-elements
- npm install node-sass axios classnames draft-js form-serialize jsuri pikaday react-animate-height react-intl@2.8.0 react-measure react-process-string react-router-dom react-tether react-textarea-autosize scroll-into-view-if-needed tabbable
I created a new Components folder containing a file called DocViewer.js with this content:
import ContentPreview from 'box-ui-elements/es/elements/content-preview';
import messages from 'box-ui-elements/i18n/en-US';
const FILE_ID_DOC = '999999';
const token = 'my_dev_token';
const language = 'en-US';
function DocViewer(props) {
return (
);
}
export default DocViewer;
My index.js file contains this:
import React from 'react';
import { render } from 'react-dom';
import './index.css';
import DocViewer from './Components/DocViewer';
import * as serviceWorker from './serviceWorker';
const container = document.querySelector('.container');
render (
, container
);
serviceWorker.unregister();
And my public/index.html contains this:
React App
My reactJS project transpiled just fine without any errors. The browser came up and loaded the page. Since I turned on the header I can see the filename displayed with icon buttons showing up. HOWEVER, the content of the file would not display. I check the dev tools and no errors at all. The file did load because I can see the network status loaded the file. I can confirm the file stream was sent to the browser because when I click the download icon in the Preview the PDF file downloaded and opened successfully.
I have attached a screenshot, as you can see it's doesn't paint/display the content of the file but the stream was received by the browser. This file does open in Box.com.
-
Great support from Box crew.
SOLUTION: The CSS is a must to define the size of the Preview container; or else it defaults to size 0 (zero) hence the body of file is not displaying.
.container { height: "100%"; width: "100%" }
".container" is whatever is containing the ContentPreview element.
Please sign in to leave a comment.
Comments
1 comment