Programming Phoenix LiveView: Display Image Uploads (pdf p142)

Community PragProg Customers
,
1

The markup used to display the uploaded image results in a Phoenix.LiveView.HTMLTokenizer.ParseError error.

lib/pento_web/live/product_live/show.html.heex:19:10: expected closing `"` for attribute value

2

Thanks for catching this! The correct image tag code starting on line 12 of lib/pento_web/live/product_live/show.html.heex should be:

<img
      alt="product image" width="200" height="200"
      src={
              Routes.static_path(
              @socket,
              (@product.image_upload || ~s[/images/default-thumbnail.jpg]))
              } >

We’ll fix that in the next release :slight_smile:

3

Hi, also related to uploads, on p. 140 there’s

<div phx-drop-target="{ @uploads.image.ref }">

and I think it should be

<div phx-drop-target={@uploads.image.ref}>
4

Right you are! Thanks for catching that :slight_smile: Will be fixed in the next release.

5

One more point regarding the image upload: you referenced the function upload_image_error/2 on page 144 but it was never declared anywhere:

<p>entries</p>
<%= for entry <- @uploads.image.entries do %>
<p>
<%= entry.client_name %> - <%= entry.progress %>%
<span class="alert-danger"><%= upload_image_error(@uploads, entry)%></span>
<button phx-target="{ @myself }"
phx-click="cancel-upload" phx-value-ref="{ entry.ref }">cancel</button> </p>
<% end %>

Sure, when I grabbed the source code, I found the function but it looks a bit weird to not mention it at all (at list smth like an exercise to do, etc.).

2 Likes
6

When I use the provided code source and try to upload a file having one of the accepted extensions and the valid size, I get the error:

[info] JOINED lvu:0 in 1ms
  Parameters: %{"token" => "SFMyNTY.g2gDaAJhBXQAAAADZAADY2lkYQFkAANwaWRYZAANbm9ub2RlQG5vaG9zdAAAA4YAAAAAAAAAAGQAA3JlZmgCbQAAABRwaHgtRnRHTGJVWDd3a2hxVkFPb20AAAABMG4GAPlg29R-AWIAAVGA.woJlQ0gYl_VBO5A3AoPQh8hTLSjmhcyJN4iIiBjN6e4"}
warning: consuming uploads requires a return signature matching:

    {:ok, value} | {:postpone, value}

got:

    "/images/live_view_upload-1644248654-356184564636173-8"

When checking the priv/static/images folder, I see there is a new file named live_view_upload-1644248654-356184564636173-8 created with the same content I tried to upload.
What am I missing?

7

Good catch! I’ll fix that for the next release.

8

Hi again,
Thanks for pointing this out. Looks like there have been some changes to the upload API that the new release didn’t catch. You’ll find the corrections here Programming Phoenix LiveView: book not updated to version 1.6 (p. 18) - #11 by SophieDeBenedetto and they will be reflected in the next upcoming book release.

9

Yep, me too.

10

Thanks for sharing your feedback! The next Beta release will correct this and include some discussion of that helper method.