Thank you for this. It’s helpful for me to conceptualise this at a more fundamental level.

Oh wow, is this the industry standard to basically set up a “routine clean up” system?

How have you dealt with it? I think solving this issue will at least reduce the chances of redundant uploads to S3.

Ok, thank you for your help!

For anyone else reading, I tried to solve the Case 2 problem above with a simple case do in my presign_upload(). It was a failure as i need to surgically manipulate the socket to edit the errors so that the usual handle events can validate my forms. I shall await a more skilful individual to navigate this :')

My solution to work around this is having two forms.

A normal form with a quick hack to trigger the live_file_input

And a second form with the uploads in to submit manually after the normal form has been saved

<form phx-submit="SUBMIT" ...>
  ...
  <!-- <div>
    // Some kind of hook or custom web component
    const other = document.querySelector('form[phx-submit="SUBMIT_UPLOADS"] input[name="foo"]');
    your_button.addEventListener("click", () => other.click());
  </div> -->
</form>

<form phx-submit="SUBMIT_UPLOADS" ...>
  <.live_file_input upload={@uploads.foo} />
  <button :if={@foo_done} type="submit" phx-mounted={JS.dispatch("click")}>Submit</button>
</form>