htmlToDocx? No! docxToHtml! How about both?

Wait a minute... didn't you already do this sorta play on article title? Why yes.

Yes I did.

• Live Demo
• Source for microservice
• Source for demo

This will cover a slightly more complex aspect of a micro frontend (at least on one side of that transaction) which is taking a FormData object to allow for uploading files, then using a npm package called busboy which is used for "parsing incoming HTML form data" as well as concat-stream for file upload via that form data POST.

This end point / use case involves:

• our user already having content in a format they are used to working with .docx files
• asking them to upload that file via HTML form
• POSTing to our micro
• Loading the file as a stream / tmp as not to store it (because it's a Lambda it has no ability to save)
• Taking this streamed content and converting to HTML
• sending back to the user

The process of converting HTML into a .docx is very straight forward and not too dissimilar from the previous htmlToMd example shown, so this post will focus on The Hard Problem™.

new FormData

Did you know that you can programatically create and populate FormData as if it was accepted via an input tag? I didn't before writing this, but it makes perfect sense. All the HTML tags are (typically) just hitting JS APIs that we can access or at least have some parallel.

Here's the source leveraged in the public demo that's using a new FormData in order to render an input tag, handle file selection, issue the POST to our micro and render the responding HTML.

  // docx to html
  docxToHtmlRender() {
    return html`
    <label>Upload Docx file to get HTML</label>
    <input type="file" id="upload" @change="${this.docxToHtmlUpload}" />
    <textarea id="response" rows="10" cols="50"></textarea>
    <h1>HTML that was in the file upload</h1>
    <div id="here"></div>
    `;
  }

  docxToHtmlUpload(event) {
    const files = event.target.files;
    const formData = new FormData();
    formData.append('upload', files[0]);
    MicroFrontendRegistry.call('@core/docxToHtml', formData, this.docxToHtmlResponse.bind(this));
  }

  docxToHtmlResponse(data) {
    console.log(data);
    this.shadowRoot.querySelector("#here").innerHTML = data.data.contents;
  }

Video time

I'll dig into how the microservice is processing this file and returning the results as it's a bit more complicated than the previous micros.