Search code examples
elixirphoenix-live-view

File upload not saving files to folder


I've followed the Phoenix LiveView file upload code here https://hexdocs.pm/phoenix_live_view/1.0.0-rc.7/uploads.html and so far everything works just fine with no errors, the only thing I noticed is that the file (images in my case) are not actually being saved. Instead of I have this long, weird filename with no extension e.g. live_view_upload-1733165679-200177911668-2

My code for uploading is line for line from the docs:

def handle_event("save", _params, socket) do
    Logger.info("UploadLive.Upload: save")

    uploaded_files =
      consume_uploaded_entries(socket, :avatar, fn %{path: path}, _entry ->
        dest = Path.join(Application.app_dir(:live_jobzz, "priv/static/uploads"), Path.basename(path))
        
        Logger.info("UploadLive.Upload: path #{path}")
        Logger.info("UploadLive.Upload: dest #{dest}")

        # You will need to create `priv/static/uploads` for `File.cp!/2` to work.
        File.cp!(path, dest)
        {:ok, ~p"/uploads/#{Path.basename(dest)}"}
      end)

    {:noreply, update(socket, :uploaded_files, &(&1 ++ uploaded_files))}
  end

Solution

  • I guess LiveView is uploading the file to a temporary location first and then allowing you to do the final copy operation in the consume_uploaded_entries method.

    You can change dest to use the file name entry.client_name which should be the file name of the uploaded file. However, this would cause you to overwrite already uploaded files if someone tries to upload a file with the same name. You can use Path.extname to extract the extension and append it to the dest in this case.