Liveview presign_upload() for external uploads triggering even when changeset is NOT valid

Phoenix Forum Questions / Help
,
1

I’m trying to upload a music file. I’ve created a music struct. It takes a title (string) and file_path (string)

I create a form which requires a title and a file upload.

What I expect is for the form to throw errors when 1) the upload is empty or 2) the title is empty.

The problem:
Case 1: title and file are empty. Only the error “empty title” is shown. NO ERROR for missing upload is shown
Case 2: there’s file input but no title. When I press the upload button, presign_upload() is called and the file is sent to the cloud even though my title is empty.

Both cases are not idea. This seems like a pretty basic use case. Am I missing something?

It appears that this guy was trying to implement it too but failed in the end.

2 Likes
2

I’d strongly suggest you don’t depend on a file only being uploaded if the form is valid. There’s simply no solution to atomically persist data in the db and have an upload persisted in a different system, so pretending it would work like that is not going to be great.

The workflow I generally suggest is uploading to a temp. directory, which is regularly cleaned up (e.g. S3 can do so with livecycle configuration). Then persist the data in the db pointing to the temporary file and within the same transaction queue work (e.g. using oban) to move the file to a different path, where it won’t be deleted. That way you don’t need to care if the upload happened a few seconds or minutes before the form was submitted.

However the issue around changeset errors being a completely separate system to the errors shown for LV uploads is indeed problematic. I’ve been running into that myself as well.

2 Likes
3

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.

1 Like
4

Yes – unless you’re storing the uploaded files in db or your stored files are all the data to be stored (no related records elsewhere). Everything else is essentially a distributed system with all their (lack of) guarantees.

I didn’t have the need. It wasn’t for anything in production. In software I use I often see file uploads completely separate from form submission, where entries can be created completely separate from any files they might relate to, while those files are independently attached later.

5

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 :')

1 Like
6

Hello I posted here the way I did that was:
“I used only the changeset and get the field with get_field/2 and if is empty photos the :photo_urls field you can insert an error with the function add_error/3 and all of that is a function called validate_empty_photo_urls”.

It is ok with that @LostKobrakai or prefer to do other thing?

7

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>
1 Like