I'm having "Word found unreadable content" message while adding images to docx.

[alperkizilcay]

Hello everyone!

I'm working on React.js. After adding image to docx, I'm having "Word found unreadable content" message. I reviewed many help materials but could not find a solution.

My code is here.

import { Document, Packer, Paragraph, ImageRun } from "docx";
import { saveAs } from "file-saver";

const App = () => {
  const [imageData, setImageData] = useState(null);

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onloadend = () => {
        setImageData(reader.result.split(",")[1]);
      };
    }
  };

  const generateDocx = async () => {

    const doc = new Document({
      sections: [
        {
          children: [
            new Paragraph({
              children: [
                new ImageRun({
                  data: Uint8Array.from(atob(imageData), (c) =>
                    c.charCodeAt(0)
                  ),
                  transformation: {
                    width: 200,
                    height: 100,
                  },
                }),
              ],
            }),
          ],
        },
      ],
    });

    const blob = await Packer.toBlob(doc);
    saveAs(blob, "document.docx");
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      <button onClick={generateDocx}>DOCX İndir</button>
    </div>
  );
};

export default App;

[alperkizilcay]

I'm waiting for your suggestions.

[jaromirdalecky]

type is now required when adding images, see examples for images

[alperkizilcay]

type is now required when adding images, see examples for images

this is worked for me. Thank you alot 👍

[brightrain]

Confirming that adding the image type property keeps the 'unreadable content' error from appearing. It was also keeping 'office online' from opening the docx at all. In case anyone else spends way too much time on it.