Error after reloading XML in embedded mode

[Thiya]

Hallo together,

I embedded Draw.io in my own application. I can open files and save them. But whenever i tried to reopen something, i get one of the following errors:

1) String contains an invalid character

2) Unknown error

3) malformed URI sequence

I can't say in which situation which of this three errors appears. And i cant reproduce one special one of them.
I don't change anything in the file. Its plain exported compressed xml (i future it should be uncompressed xml --> see my other question).

Is there any way to see, which character forces these errors?

My file-data looks something like this:
<mxfile userAgent="Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0" version="6.1.2" editor="www.draw.io"><diagram>dZHBEoIgEIafhrtC49jZrC6dPHQmQGRC10EcradPAzPG4sLy7f77w4JIVo8nQ9vqAlxohCM InJAGMdxHE3bTB6OJOnOAWkU90UrKNRTeOh1sldcdEGhBdBWtSFk0DSC2YBRY2AIy0rQoWtLpdiAglG9pVfFbeVoipOVn4WS1eIcJ3uXuVF2lwb6xvshTMr3cumaLr38Q7uKchi EMkRyQyAdVE9ZkLPs13G5nTHP9nPvY1o7A/BFKy9p0PwgSR/AQ==</diagram></mxfile>

I really appreeaciate any help.
Thank you !
Best Thiya

[Gaudenz Alder]

Can you paste the uncompressed XML for this diagram so we can check what's going on? (Use Extras, Edit Diagram.)

[Thiya]

Hey,

i can't send you the uncompressed XML of the above posted compressed XML because i cant reopen it. But i will reproduce the Mistake on monday morning, when i have access to our server and will save the uncompressed XML of a new example. I will post both of the XML-datas then here.

Thans for your effort.
Thiya

[Thiya]

This is the uncompressed Data of an random simple example (via Extras --> Wsit Diagramm, before saving it in the embedded mode:

<mxGraphModel dx="1430" dy="824" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="826" pageHeight="1169" background="#ffffff" math="0" shadow="0">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="320" y="80" width="120" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="5" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;entryX=0;entryY=0.5;jettySize=auto;orthogonalLoop=1;" edge="1" parent="1" source="3" target="2">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="6" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;jettySize=auto;orthogonalLoop=1;" edge="1" parent="1" source="3" target="4">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="3" value="" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="30" y="260" width="120" height="60" as="geometry"/>
    </mxCell>
    <mxCell id="7" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;entryX=1;entryY=0.5;jettySize=auto;orthogonalLoop=1;" edge="1" parent="1" source="4" target="2">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="4" value="" style="whiteSpace=wrap;html=1;" vertex="1" parent="1">
      <mxGeometry x="500" y="320" width="120" height="60" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>


And this is the compressed Data, after saving via the save button, and using following javaScript lines:
                        else if (msg.event == 'save')
                        {
                            source.drawIoWindow.postMessage(JSON.stringify({action: 'export', format: 'xml', spinKey: 'saving'}), '*');
                            var ContentXML=msg.xml;
                            saveAsXMLFile(ContentXML,filename);
                        }


<mxfile userAgent="Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0" version="6.1.2" editor="www.draw.io"><diagram>zVZLU4MwEP41XJ1CaNVra60HPfWgHiNsAQ0sky6l OsNsCnN1NeMVsuF7LfvL7u0npjl24WWZXqHMSgvGMVbT1x5QeCHYmReLdL0yEUQ9kCis5iNBmCZvQKD7JdUWQxrx5AQFWWlC0ZYFBCRg0mtsXbNVqjcrKVM4ABYRlIdovdZTKntYjLgN5Alqc3sTy57zZOMXhKNVcH5vECsuqdX59LG4kbXqYyx3oPE3BMzjUj9Kd/OQLXcWtp6v sPtLu6NRT0HYegd9hIVYGtuKuLGstFnWYEy1JGrVyb /bENKVcGck3x8OMXMQGNMF2D IKFoA5kG6MCWuFZcNOC4v1QL1vTdI92ieMSb7tZBd56NgcuOn3CRgf9AuxGQUWUVOKCRZSzQd02t0vtAFGLheGAt08MN4Jj61wNjbiMxA1POmyIjTQEP0WsfyKzzVWOuIaBe E1AmQc5Nt9Z9yrkFJyjbuoP EwclvMnhslsL/YkmcxKK5e7ZboL9YtPOjLJp/5EULT2jRwlMYofHInaHdt/sIM2TE4Zew0 393RDzNw==</diagram></mxfile>


I don't know if it is important. I'm sending this Data ("ContentXML") with POST in a XMLHTTPRequest to a php script and save it in a newly created empty xml file.
I hope you can help me.

[Gaudenz Alder]

What's the URL of the iframe? If you're not using www.draw.io, what's the charset of the page containing the editor?

[Thiya]

I m not calling an iframe but a new Window. The url i'm calling, is like this: http://someIP/drawio/index.html?https=0&local=1&splash=0&embed=1&proto=json&spin=1

I'm not sure which charset i m using but i think the System, where i embedded Draw.io, is using UTF-8. Is there any way to find out which charset I'm using, other than the online documentation of my System, where i couldn't find clear information?

[Gaudenz Alder]

In Firefox: Tools, Page Info. To use UTF-8, add <meta charset="utf-8"> in the head section.

[Thiya]

I check it. It is UTF-8 (text/html;charset=utf-8)

so i dont need to add anything or?
Sorry i m really new to webdevelopment. If i need to add <meta charset="utf-8"> , i have to add it to my html file in the header or? Or did you mean i need to add it in the xml file somewhere?

[Gaudenz Alder]

If you use www.draw.io as the editor, does it work? Are you sure this is the encoding of the page with the editor, not the page that invokes the editor? The meta tag goes in the HEAD section of the HTML page containing the editor (http://bfy.tw/ASbT).

[Thiya]

sorry for the stupid question. I know how to add it to the html header, i was just confused if there is something similar i need to add to xml headers...

this index.html (http://someIP/drawio/index.html?https=0&local=1&splash=0&embed=1&proto=json&spin=1), which is the one I downloaded from draw.io-Github and just placed i a folder on my server, has the meta-tag with UTF-8.
the page from where i call this URL above with a javascript-Function with a onclick-event (similar to how you did it here:http://jgraph.github.io/drawio-html5/localstorage.html#default) also uses UTF-8. It wasn't in the header there, but in the main page of the System it is added. I added it also to the Page where i call the link from, but it doesnt change anything, the same mistake appears.

If i load the xml-file i created over the embedded draw.io and load it to www.draw.io the mistake also appears. If i just use the online version and save a file locally and load it in a new windwo, it doesn't happen and everything works fine.
If i create an compressed XML-File over the online draw.io and save it on the Server to load it in the embedded Draw.io everthing works fine.

So the problem only appears when i create, save and reaload in the embedded System.

[Thiya]

Your hint for an UTF-8-Problem made me think around and i recognized that i can add this line to my php-skript to make it UTF-8: $filename="\xEF\xBB\xBF".$filename;
after doing this, I compared the string i send to php with the one written to the xml-file. I recognized that all '+'-signs are replaced with blanks. If i manually change them again to '+'-signs the diagramm is loaded properly.

Before i asked the question here I already made the same comparison and didn't recognize any differences i both strings.
I dont't know where it comes from but i will go on and try to find why this happens.

Just wanted to let you know that it is likely not a draw.io problem. But you had the right Hint for me. Thank you.

[Thiya]

Fo everyone who is facing a similar Problem, this was my Solution:

The problem is not connected with draw.io at all.
I'm sending the Data with this line from Javascript to PHP:
var DataString = 'exportedXML='+encodeURIComponent(dataToSend);
request.send(DataString); (request is a XMLHttpRequest).
I missed these part: "encodeURIComponent". Therefor while sending, all '+' were replaced by a blank. (thats because the '+' means a space in application/x-www-form-urlencoded data.)
So the datastring was not readable for draw.io anymore.

Sorry for the inconvenience. But stilll Thank you very much to Gaudenz Alder. Your hint was really helpful.