How to enable LiveView File Upload in a component?

I saw that PR had been applied to enable LiveView File Upload, so I thought I would try it out. I’m relatively new to Elixir, Phoenix, LiveView, so what could possibly go wrong?

The guide makes it clear where to add the call to allow_update/3 for a LiveView, but I would like to add it to a form_component that opens in a modal window. I added a mount/1 function to the component below.

   defmodule LiveUploadWeb.PostLive.FormComponent do
      use LiveUploadWeb, :live_component
      alias LiveUpload.Blog

      @impl true

      def mount(socket) do
         IO.puts("in mount")

         newSocket =
            socket
            |> assign(:uploaded_files, [])
            |> allow_upload(:avatar, accept: ~w(.jpg .jpeg .png), max_entries: 1)

         IO.inspect(newSocket, label: "newSocket")

         {:ok, newSocket}
      end
   ...

The mount/1 function is called, and the uploaded_files and uploads assigns are added to the session.

in mount
Socket: #Phoenix.LiveView.Socket<
  assigns: %{
    flash: %{},
    myself: %Phoenix.LiveComponent.CID{cid: 2},
    uploaded_files: [],
    uploads: %{
      __phoenix_refs_to_names__: %{"phx-FkYRxX4PVOACIAIJ" => :avatar},
      avatar: #Phoenix.LiveView.UploadConfig<accept: ".jpg,.jpeg,.png", ...>
    }
  },

However, when I run the server, go to /posts, click ‘New Post’, click “Choose File” and select a file, I get an error message on the sever 'no uploads have been allowed’.

Can someone please explain how to allow uploads in a stateful component?

The repo is here. I explained each of the steps I followed in the README.md file. The README.md also includes the detailed error message.

2 Likes

Its not yet supported

6 Likes

You saved me a lot of time with this :+1::+1::+1::+1::+1:

It’s possible to upload files in components. You should call allow_upload/3 inside update function instead of mount.

Please note that you have to use <form> inside your component, which makes it impossible to use inside another <form> (HTML doesn’t allow nested forms)

1 Like

It doesn’t work for me. I’m getting:

no uploads have been allowed on LiveView named Blabla

try GitHub - mcrumm/live_upload_example: Demonstrating file uploads with Phoenix LiveView that’s the example I’ve used…

4 Likes

To clarify, Live Upload is supported in LiveView and LiveComponent in 2022. It has well support on server-side uploading and client-side direct uploading.

If you encounter any problems, check:

  • allow_upload/3
  • phx-target attribute of form element if you are using LiveComponent

The example provided by @outlog is recommended.

6 Likes