How to reset a file upload?

Hey :wave:

We use allow_upload/3 in an handle_event/3 function like so:

	  def handle_event("open_modal", params, socket) do
	  	socket = 
	      	socket
	          |> assign(:uploads, %{})
	          |> allow_upload(:image, [...])
	          [...]
	  
	  	{:noreply, socket}
	  end

It works fine when the event open_modal is triggered once but if it triggers again we get an issue:

(RuntimeError) existing upload for image already allowed in another component ()

This is raised by Phoenix.LiveView.Channel.ensure_unique_upload_name!/2 which checks if the upload name - here image - is unique.

In our case we can’t change that name to fix the issue and we’d like to reset that name unfortunately it isn’t stored in the socket assigns but in the Channel state which isn’t easily accessible from the Liveview.

Do you have any idea how we can solve this ?

1 Like

maybe with the handle_params function.

I don’t think handle_event is the culprit nor that handle_params would solve this.

I also faced this issue where I want to do mass input and submit the same form multiple times to create multiple entries and I could not find the way to properly reset the uploader. It’s like some lingering state is still existing in the LiveView process, despite reassigning :uploads or calling disallow_upload.

If someone has any clue, I would also be interested :person_shrugging:

Can you please explain a bit better what you’re trying to achieve? Why do you need to “reset” the upload? :thinking:

If I want to allow the user to submit multiple files with the same upload, I do that by setting auto_upload: true and handle all new uploads in the progress callback. Don’t know if this is related to what you guys want to do.

I can confirm– in short, you can invoke disallow_upload/2 after allow_upload/3 to disable uploading, but if you then invoke allow_upload/3 again with the same name we raise.

So at the moment there really is no way to “reset” a specific upload name, but I also can’t recall whether we intended this or not, so it might be a bug :slight_smile:

2 Likes

Thanks! Do you know who might recall?

Chris might remember– feel free to open an issue to get more feedback! :slight_smile:

We needed to “reset” the upload because the Liveview that handles the upload can invoke disallow_upload/2 and allow_upload/3 multiple times in a row (in handle_event/3 when a user opens/closes a modal). This isn’t the same thing as allowing multiple file upload.

As @mcrumm said:

We decided to put back allow_upload/3 in the mount/3 function and change dynamically the entry_path based on the socket assigns which is what we tried to achieve in the beginning.

It’s worth investigating anyway so we may open an issue :slight_smile:

Thanks for your help :pray:

2 Likes

Is this a stateful or stateless component? I’m pretty sure that if you’re gonna have a component handle uploads the component needs to be stateful, and then with a unique ID in each case. This would avoid some of the issues I think?

EDIT: Specifically the idea in that case is that if you need to “reset” an upload you simply replace the whole component with a new instance of the stateful live component with a new unique ID

1 Like

I edited my last answer for more clarity:

the upload because the Liveview that handles the upload can invoke disallow_upload/2 and allow_upload/3 multiple times in a row (in handle_event/3 when a user opens/closes a modal).

It’s a Liveview not a LiveComponent so no re-render :slight_smile:

The fix I went with was preserving the existing upload instead of recreating it – to the original poster, add a check to see if the upload is already created, and then don’t call allow_upload again if the upload already exists