Live View: How to Upload Files

While Uploading files with LiveView, is not returning %Plug.Upload{} struct in handle_event/3 function, instead it is returning string something like this "[object File]". Do I need to parse this string to get the struct or there is some different way to handle File uploading with LiveView.

Below is my code for reference.

<%= form_for @changeset, "#", [class: "add-candidate-form w-100", id: "applicant-form", multipart: true, phx_change: :validate, phx_submit: :save], fn f -> %>

            <div class="form-group col-6">
              <label>Resume <span class="text-danger">*</span></label>
              <div class="input-group">
                <div class="custom-file">
                  <%= file_input f, :resume, [class: "custom-file-input", id: "inputGroupFile01", file_input: "one"] %>
                  <label class="custom-file-label" for="">Max size 2 mb</label>
                </div>
              </div>
            </div>

<% end %>

When not using LiveView, this is working fine and I am getting %Plug.Upload{} struct in the params on submitting the form.

If I remember @chrismccord’s keynote at Elixirconf EU earlier this month, file upload is still a feature on their to-do list.

Also: https://github.com/phoenixframework/phoenix_live_view/issues/104

1 Like

Hi,
the merge request for the live view upload was merged into master around 2 weeks ago by @chrismccord.
I tried it out, but I didn’t got it working. I used the code example which was shown by @Gazler in his ElixirConf 2019. I got the checkout repo working as the repo uses the feature branch.
If I use the master branch I get this mentiond “[object File]”. So it is working.

Does anybody did an live view upload example app using the master brancch.
Or did I misunderstood something with the merging of https://github.com/phoenixframework/phoenix_live_view/pull/1184 into master.

thx for any hints/help.

Hello and welcome,

I think it’s available now with Phoenix 1.5.7 which includes phoenix_live_view 0.15 :slight_smile:

6 Likes