use wetransfer embed in form

I have a contactform with some fields + a wetransfer embed snippet that basically fills an input field with a wetransfer url after uploading some file to wetransfer

I would like to make the upload mandatory (required) so that the form cannot be submitted unless a file has been uploaded to wetransfer. (The input field needs to contain a url value)

The snippet one has to use (see https://developers.wetransfer.com/) is this one:
(I removed my embedkey value for security reason)

<div data-widget-host="habitat" id="wt_embed">
  <script type="text/props">
    {
      "wtEmbedKey": "not-disclosed-for-security-reason",
      "wtEmbedOutput": ".wt_embed_output",
      "wtEmbedLanguage": "en"
    }
  </script>
</div>
<script async src="https://prod-embed-cdn.wetransfer.net/v1/latest.js"></script>
<!--
  The next input element will hold the transfer link. For testing purposes, you
  could change the type attribute to "text", instead of "hidden".
-->
<input type="hidden" name="wt_embed_output" class="wt_embed_output" />

The problem is that the input field is not a contactform 7 field as such and even adding the “required” attribute does not solve the issue. Adding a cf7 field with the name “wt_embed_output” does not work, neither does it work if I add the class etc.

Any ideas ?