Overview of the Project How to Upload File and Preview it Using Docx-Preview in React

Our goal is to create a form where users can upload a DOCX file. After the upload, the contents of the DOCX file will be previewed in a scrollable area. This feature is especially useful in applications that require document management or content creation.

Why Docx-Preview?

Docx-Preview specializes in rendering DOCX files, making it perfect for this task. By using it you can create a dynamic and interactive user interface.

1. Setting Up the React Project

Before we dive into the implementation, let’s first set up the React project and install the required dependencies.

Installing Dependencies

To start, you’ll need React, React-Bootstrap and Docx-Preview. You can install these libraries using npm:

npx create-react-app docx-preview-app
cd docx-preview-app
npm install react-bootstrap bootstrap docx-preview

2. Creating the File Upload Form

Now, let’s set up a basic form to allow the user to upload a DOCX file.

Using Bootstrap for File Input

React-Bootstrap provides an easy way to use Bootstrap’s components, including file inputs. In this case, we’ll use a file input field to allow users to upload their DOCX files.

<Form.Group>
  <Form.Label>Upload a Word Document(.docx)</Form.Label>
  <Form.Control
    type='file'
    accept='.docx'
    onChange={handleFileChange}
  />
</Form.Group>

Handling File Validation

We also need to validate that the user uploads a valid DOCX file. We will check the file type before rendering it. If the file isn’t a DOCX, we’ll show an error message.

3. Rendering DOCX File with Docx-Preview

Once the user selects a file, we will read it and render it inside a viewer area. Here’s how to implement it:

Using renderAsync for DOCX Preview

renderAsync is provided by the Docx-Preview library, and it handles rendering DOCX files directly. We’ll use the FileReader API to read the file and pass it to renderAsync.

const handleFileChange = async (e) => {
  // Read the DOCX file selected by the user
  const file = e.target.files[0];

  // Validate the file type
  if (!file || file.type !== "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
    setError("Please upload a valid .docx file.");
    return;
  }

  setError(""); // Clear any previous error

  // Read the file as an ArrayBuffer
  const arrayBuffer = await file.arrayBuffer();

  // Render the DOCX content inside the viewer
  renderAsync(arrayBuffer, viewerRef.current).catch(() => {
    setError("An error occurred while rendering the document.");
  });
};

Displaying the File Content in a Div

We use a ref to create a reference to the div where the DOCX content will be rendered.

<div
  ref={viewerRef}
  style={{
    border: "1px solid #ccc",
    padding: "16px",
    height: "500px",
    overflow: "scroll"
  }}
>
  {/* The DOCX file will render here */}
</div>

4. Handling Errors and File Validation

It’s important to handle errors gracefully. If the user uploads an unsupported file type or there’s an issue rendering the DOCX, we’ll display an appropriate error message.

const [error, setError] = useState(""); // State to store error messages

const handleFileChange = async (e) => {
  // Read the DOCX file selected by the user
  const file = e.target.files[0];

  // Check if the file is a valid DOCX
  if (!file || file.type !== "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
    setError("Please upload a valid .docx file.");
    return;
  }

  setError(""); // Clear any previous error

  try {
    const arrayBuffer = await file.arrayBuffer();
    renderAsync(arrayBuffer, viewerRef.current);
  } catch (err) {
    setError("An error occurred while rendering the document.");
  }
};

5. Styling the Viewer Area

The div where the DOCX file is rendered can be styled using inline CSS or external stylesheets. Here’s an example of custom styling for the document viewer:

<div
  ref={viewerRef}
  style={{
    border: "1px solid #ccc",
    padding: "16px",
    height: "500px",
    overflow: "scroll"
  }}
>
  {/* DOCX content will show here */}
</div>

6. Conclusion

In this tutorial, we have successfully integrated Docx-Preview into a React application. We created a simple file upload form, validated DOCX files, and displayed them using the renderAsync method. This provides a seamless way for users to upload and preview DOCX files directly in the browser.

7. FAQs

1. Can I upload other file types besides DOCX?
Yes, you can customize the file validation to allow other file types such as PDFs, but Docx-Preview specifically handles DOCX files.

2. Does Docx-Preview support all DOCX features?
Docx-Preview can render basic content like paragraphs, images, and tables but may not support all complex DOCX features such as advanced formatting or macros.

3. Can I download the DOCX file after previewing?
This tutorial only covers displaying DOCX files, but you can easily add a download button to trigger a file download if necessary.

4. What if the document doesn’t render correctly?
Check the file type and ensure the DOCX file is properly formatted. If the error persists, review the console for more specific issues.