Opening local files in MxGraph via urlParam

How can I open a local file in grapheditor passing the name via urlParam? I tried with this code in index.html but it does not work.

      var editor = new EditorUi(new Editor(urlParams['chrome'] == '0', themes));

        try
        {
          editor.open(encodeURI(urlParams['xml']));
        }
        catch (e)
        {
          mxUtils.error('Cannot open ' + urlParams['xml'] +
            ': ' + e.message, 280, true);
        }

Thanks in advance.

I had to do the same. It is helpful if you have a server running locally to serve your files. For example:

python -m SimpleHTTPServer 8000

This command will start a simple server so your browser can send AJAX request in order to load files from your filesystem.

I have to assume the following setup: You have mxGraph running in a folder in the file index.html and the same folder contains another folder containing your xmls. Like this:

index.html
/xmls/1.xml
/xmls/2.xml
...

This is were you execute the command to start the server. Now you can reach your application here: localhost:8000/index.html

You were right by adding a GET parameter in order to identify the file on your hard drive.

for example: localhost:8000/index.html?xml=1.xml

For this example to work the structure should be comparable to the GraphEditor (https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html). It would be a good idea to clone this project and play around with it.

Now in your index.html you might add something like this:

function open_xml_on_init(editorUi) {
var xml_file_path = 'xml/' + urlParams['xml'];
if (urlParams['xml'] != null && urlParams['xml'].length > 0) {
    var splitted = xml_file_path.split('/');
    var only_name = splitted[splitted.length - 1];
    editorUi.editor.filename = only_name;
    var req = mxUtils.get(xml_file_path, mxUtils.bind(this, function (req) {
        if (req.request.status >= 200 && req.request.status <= 299) {
            if (req.request.response.length > 0) {
                editorUi.editor.graph.model.beginUpdate();
                try {
                    var xmlElem = mxUtils.parseXml(req.request.response).documentElement;
                    editorUi.editor.setGraphXml(xmlElem);

                }
                catch (e) {
                    console.error(e);
                }
                finally {
                    editorUi.editor.graph.model.endUpdate();
                }
            }
        }
    }));
}
}

Run this method somewhere in your index.html and you are good to go!