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;