LiveView live_file_input with auto_upload + save

Phoenix Forum Questions / Help
, , ,
1

Hi Devs,

I am using Uploads — Phoenix LiveView v0.15.4 (hexdocs.pm) feature in my application. I am using it with auto_upload: true option like below:

        allow_upload(:excel_file,
        accept: ~w(.xlsx),
        max_entries: 1,
        auto_upload: true,
        progress: &handle_progress/3

My requirement is I need to validate the file on fly before submitting the form. I am able to achieve this pretty easily with auto_upload. But I need to save file only after form gets submitted. I am doing it in not so efficient way. My solution for this is as below:

  • Validate the file. If the file is valid copy it to temporary folder.
  • Upon submitting the form save file to s3 bucket and remove it from temporary folder.

Here if we observe Phoenix live view automatically keeps it in temp folder with auto_upload option. but I am unable to use it on form submit because that live file upload process is deleting it on exiting the process. Is there a way to use the same temp file created by phoenix live view or any other idea which is better than mine :slight_smile: .

2

Assuming you are running this on a UNIX-like OS, if you just move the file to a new filename on the same volume, it won’t copy the data (which is slow) but simply create a new file entry for it (fast), and the Phoenix process will not delete it. I have a function that attempts to move the file, and only if that fails then falls back to copy for this exact purpose:

  @doc "Move a file, copy if we must"
  @spec move_file(src_path :: String.t(), dest_path :: String.t()) :: :ok | :error
  def move_file(src_path, dest_path) do
    # move if we can, copy if we have to
    case File.rename(src_path, dest_path) do
      {:error, :exdev} ->
        case File.copy(src_path, dest_path) do
          {:error, _} = error -> error
          _ -> :ok
        end

      {:error, _} = error -> error
      _ -> :ok
    end
  end
2 Likes
3

Thanks @aseigo seems to be good idea. will try it out .

4

On the same notes. how are you handing destination folder location ending up with unused files?
Consider a scenario like user uploads file and without submitting it, user will re-upload another file. In my case I am tracking 1st file path in socket assigns and deleting 1st file before copying 2nd file and updating path with 2nd file in assigns and story continues till user submits :slight_smile: .

5

I don’t have that particular issue as the processing begins as soon as the upload occurs. It isn’t tied to a form submission in my case …

6

hm got it :+1:

7

Correct, the uploaded temp file is cleaned up when its upload process exits, but this does not occur until you invoke one of the consume_uploaded_* functions for a given upload entry. So you can start uploading automatically and still wait to consume them in your form’s phx-submit handler.

1 Like
8

Can you share more details about this? Specifically I am curious about two things:

  1. What kinds of file validation are you performing? Are you inspecting the actual file bytes?

  2. You are uploading to your web server to turn around and transfer the file to S3, have you considered migrating to client-side uploads via pre-signed URLs?

9

Yes I actually want to read the file and match it to few database data & inform the user if any invalid data
present before submitting itself.

10

Yes I am aware of this. But I don’t want to save some invalid file in S3. BTW I can remove it from S3 if the file is invalid. but tricky part is when the file is valid and user leaves page without submitting the form.

All these things I can avoid by removing auto_upload. But my business folks liked it a lot the way it shows the errors instantly. So don’t want to disappoint them :slightly_smiling_face: