I have a Codesandbox
I have this app that displays different files like jpg, mp4 or now docx files. I can’t make docx file position so it look good but jpg or mp4 is working OK.
Try it just open a doxc file.
In file FileContentRenderer.jsx here below I use switch case
and n open Component needed like docx-viewer.jsx
/* eslint-disable no-return-assign */ import React from "react"; import CardMedia from "@material-ui/core/CardMedia"; import { withStyles } from "@material-ui/core/styles"; import { DocxViewer, VideoViewer, UnsupportedViewer } from "./drivers"; const styles = () => ({ viewerWrapperMp4: { background: "black", width: "100%", height: "20vw", textAlign: "center" }, viewerMp4: { width: "auto", height: "100%" }, outer: { height: "100%", width: "100%", position: "relative", overflow: "hidden" }, cardMedia: { width: "100%", height: "20vw" } }); class FileContentRenderer extends React.Component { driveForImage() { const { CurrentFile } = this.props; const { classes } = this.props; return ( <CardMedia className={classes.cardMedia} image={CurrentFile.preview} title="test test" /> ); } render() { const { classes, CurrentFile } = this.props; const filePath = CurrentFile; switch (CurrentFile.mediaType) { case "csv": { break; } case "jpg": { return this.driveForImage(); } case "image/jpeg": { return this.driveForImage(); } case "image/gif": { return this.driveForImage(); } case "image/bmp": { return this.driveForImage(); } case "image/png": { return this.driveForImage(); } case "video/mp4": { return ( <CardMedia> <VideoViewer fileType="mp4" filePath={filePath.preview} /> </CardMedia> ); } case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': { return ( <CardMedia className={classes.cardMedia}> <DocxViewer fileType="application/vnd.openxmlformats-officedocument.wordprocessingml.document" filePath={filePath.preview} /> </CardMedia> ); } default: { return UnsupportedViewer; } } return null; } } export default withStyles(styles)(FileContentRenderer);
I think the problem is css something. I have tried so much and think I missed something
Advertisement
Answer
Replace your return block with following block in your docx-viewer.jsx
.
return ( <div id={docxId} style={{ backgroundColor: 'white', float: 'left', overflowY: 'auto', height: '20vh', }} > <Loading /> </div> );