Upload XML (or .bpmn) files in my web-app

[RomeoSebas]

Dear team,
I want to implement the function of uploading an .xml or .bpmn file and this should then been depicted as the BPMN-Model. How can I do that? I mean I want this option (see picture) but I cannot implement/see it.

[philippfromme]

Simply implement a file upload and import the file using modeler.importXML.

[RomeoSebas]

Thank you for answering

I was not able to achieve it just with “modeler.importXML”. Somehow the “Walktrough” is not as simple/easy as it is shown

This was my solution.

In app.js I added:

const multer = require('multer');

// Configure multer for file uploads
const upload = multer({ dest: 'uploads/' });

// Serve files from the uploads directory
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));

// Route to handle file upload
app.post('/upload', upload.single('diagram'), (req, res) => {
// Respond with the path of the uploaded file
res.json({ file: `/uploads/${req.file.filename}` });
});

In index.js I added:

// Function to initialize the modeler and import the BPMN XML
function initializeModeler() {
  const modeler = new BpmnModeler({
      container: '#canvas'
  });

  // Attach this modeler instance to the window so it can be accessed globally
  window.modeler = modeler;
}

// Function to import XML into the modeler
window.importXML = async (xml) => {
  try {
      await window.modeler.importXML(xml);
      window.modeler.get('canvas').zoom('fit-viewport');
  } catch (err) {
      console.error('Error importing XML: ', err);
  }
};

// Initialize the modeler when the script is loaded
initializeModeler();

In my website.ejs I added:

  document.getElementById('uploadForm').addEventListener('submit', async function(event) {
    event.preventDefault();
    const formData = new FormData(this);
    const response = await fetch('/upload', {
      method: 'POST',
      body: formData
    });
    const result = await response.json();

    // Assuming `importXML` is a function exposed by your `bundle.js`
    const xmlResponse = await fetch(result.file);
    const xmlText = await xmlResponse.text();
    window.importXML(xmlText);
  });