Cannot render Image from word

[Thái Ph?m Qu?c]

I am getting an error when opening word file in syncfusion/ej2-react-documenteditor. In my word file there are usually images in it, but when I open the file there are no more images, still text.

Here is my code and example image :  

useEffect(() => {

    const loadFile = () => {

      const tmp = message.path[0].type

      const type = tmp.slice(1, tmp.length)

      setFileType(type)

      setFile(`${CDN_URL_VIEW}/${message?.path[0].path}`)

      fetch(`${CDN_URL_VIEW}/${message?.path[0].path}`)

        .then((response) => response.blob())

        .then((blob) => {

          const reader:any = new FileReader()

          reader.onload = () => {

            const base64Data = reader?.result.split(",")[1] // Lấy dữ liệu base64

            editorRef?.current.documentEditor.open(base64Data) // Mở tài liệu

          }

          reader.readAsDataURL(blob) // Chuyển file Blob thành Base64

        })

        .catch((error) => console.error("Error loading document:", error))

    }

    loadFile()

  }, [message])

  const renderFileViewer = () => {

    if (!file) {

      return <p className="text-muted">No file selected. Please upload a file.</p>

    }

    if (["pdf", "docx", "xlsx"].includes(fileType)) {

      return (

        <DocumentEditorContainerComponent

          height='100%'

          ref={editorRef}

          enableToolbar={true}

          enableWordExport={true}

          enableEditor={true}

          enableImage={true}

          enableImageResizer={true}

          serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"

          toolbarItems={['New', 'Open', 'Undo', 'Redo', 'Separator', 'Image', 'Table']}>

          <Inject services={[Toolbar]}></Inject>

        </DocumentEditorContainerComponent>

      )

    }

    return <p className="text-danger">Unsupported file type selected.</p>

  }

[Mohammed Affan Saqib Hussain]

Hi Thái Ph?m Qu?c,

We opened documents containing images but did not face any issue. We suspect that the reported problems are might be due to the contents in the input word document which used at your end. We need to investigate with the contents in your input Word document to reproduce the exact problem at our end. So, could you please provide us the input Word document which used at your end and also share the details of issue if you faced any in console. Thereby, we will analyze further and provide you the appropriate solution at the earliest.

Note: If you have any confidential data in your Word document, please replace with some dummy data and provide us the same. We just need your document to recreate the problem you face.

Regards,

Mohammed Affan C

[Thái Ph?m Qu?c]

here is my docx,

Attachment: tesst1_8c50a952.zip

[Mohammed Affan Saqib Hussain]

Hi Thái Ph?m Qu?c,

Currently, we are validating the issue and get back to you with more details by December 04,2024.

Regards,

Mohammed Affan C

[Thamizhselvan Varadharajan]

Hi Thái Ph?m Qu?c,

Picture fill:

Currently, document editor doesn’t provide support for Picture fill in Document Editor.

We have already logged this as a feature request. We don’t have any immediate plans to implement this feature now.

We usually have an interval of at least three months between the releases. At the planning stage for every release cycle, we review all open features once again and finalize features for implementation based on specific parameters, including product vision, technological feasibility, and customer interest. The feedback will be moved to scheduled status with an estimated delivery period whenever we have more information to provide regarding the development of this improvement. We appreciate your patience until then.

 

You can track the status of this feature at the following link:

https://www.syncfusion.com/feedback/29602/gradient-texture-and-picture-fill-types-for-shape

 

Group shapes:

 

Currently, document editor doesn’t provide support for group shapes in Document Editor. We have planned to include this feature in the 2025 Volume 1 release. We will provide an update once this feature has been successfully implemented in the Document Editor.

 

You can track the status of this feature at the following link:

https://www.syncfusion.com/feedback/6049/add-support-for-group-shapes-in-documenteditor

 

Workaround solution for group shape preservation:

The group shapes can be saved as images in the Document Editor using MVC in the server backend. However, when utilizing the MVC backend server, the group shape will not be retained as individual group shape elements but rather converted into an image and displayed.

 

Kindly please check on the below documentation to use MVC web-server:

https://ej2.syncfusion.com/react/documentation/document-editor/web-services/mvc

Regards,

Thamizhselvan.

[Thái Ph?m Qu?c]

Thank you so much. That is very helpful