Unable to receive file data

[Turbine1991]

I'm unable to loop through the files at the fastify end.

I've created a simple form with the help of bulma:

<form id="form-upload" action="/upload/submit" method="post">
  <div id="file-js-example" class="file has-name">
    <label class="file-label">
      <input class="file-input" type="file" name="files" id="files">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
        <span class="file-label">
          Choose a file…
        </span>
      </span>
      <span class="file-name">
        No file uploaded
      </span>
    </label>
  </div>
</form>

Here is the fastify code:

www.fastify.post('/upload/submit', function (req, reply) {
  console.log(req.raw.files); // This returns null
});

I presume that I've done something wrong in creating the HTML form? Thank you.

[flo-sch]

If you use the HTML form action to call your backend endpoint, then you probably need to add enctype="multipart/form-data" attribute on it, so the browser knows the request should be sent as multipart and the backend can parse files.

Ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype