Load drawio with files of different formats

[AngusParsonson]

Hi there,

Is there a way to load DrawIoEmbed with different file types, not just XML?

I want to load PNG, Visio files, etc., when the component is mounted. Currently, I can only load XML files by using the xml prop.

If I spin up DrawIoEmbed, I can drop these files into the editor, and it works nicely, so there might be a way to do this programmatically.

Thanks

[marcveens]

Hi Angus,

According to the draw.io docs it should be possible, I just have to find some time to check whether it's easily implemented within this plugin. I'll get back to you later!

[marcveens]

I just added an example of how to load a .png file, and transform it to the correct format:

https://github.com/marcveens/react-drawio/blob/f154102ec850d1ad1ea7a07479ebf7a483fcda7f/stories/DiagramsEmbed.stories.tsx#L53C1-L66C3

In case of .vsdx files, I don't know how draw.io handles them. There's not much to find online on how to parse those files. In the end, it should be an xml/base64 format one way or the other. I can't seem to parse that file type correctly, so unfortunately I'm not able to help with that.

[AngusParsonson]

Hey @marcveens, thanks for your response.

So is that just loading in a base64 string in the XML?

Whenever I try to do this I don't see anything appear in the editor, or I get an error e.g. Not a diagram file (error on line 1 at column 1: Start tag expected, '<' not found)

Thanks,
Angus

[AngusParsonson]

Hey @marcveens, that's awesome thank you, although it looks to me like the parent event is still "export" when I click the blue save button in the top right. Same thing if I do file->save on the story example there, the parent event still seems to be "export".

[marcveens]

You're right... I was a little too fast with that release. I'm having a look if I can get it fixed now

[marcveens]

Alright, version 0.1.7 is a fact! The parentEvent is export when you call the action manually, and save when pressing the "save" button in the UI

[AngusParsonson]

Works a charm, thanks @marcveens!

[marcveens]

No problem! If you have some time, could you mark #12 (comment) as an answer? That way other people can easily find it when they have a similar question. Thanks!

[AngusParsonson]

Is there a way to access the underlying postMessage function of draw.io? Perhaps I could call import with a visio file using postMessage?