Waffle with LiveView

BillBryson

I’m trying to use waffle to handle the upload with LiveView uploads and receive the following error: [error] {:error, :invalid_file_path}.

I’m building a %Plug.Upload{content_type: content_type, filename: filename, path: path} struct which is then sent over as the “image” attribute to my schema that has my Waffle uploader type for field image. But in the cast_attachments function it returns the error changeset:

#Ecto.Changeset<
  action: nil,
  changes: %{title: "foo"},
  errors: [
    image: {"is invalid",
     [type: MyAppWeb.Uploaders.PostImage.Type, validation: :cast]}
  ],
  data: #MyApp.Blog.Post<>,
  valid?: false
>

The attributes being passed to the schema changeset are:

%{
  "title" => "foo",
  "image" => %Plug.Upload{
    content_type: "image/png",
    filename: "blog-title.png",
    path: "/var/folders/mt/9c2zqzy93tg5xfl7317j7m340000gn/T//plug-1619/live_view_upload-1619366353-634670199203471-4"
  }
}

I have tried without the LiveView and it works, but only difference I can see is in the path set on the upload.

9 comments

/phoenix #liveview #waffle-ecto

0 2804 9

2021-04-26 00:46:41 UTC

Showing Posts 1 to 9

Show Best Posts
Show All (oldest first)
Show All (newest first)

cenotaph

Liveview already has a dedicated file upload section with the necessary methods, js functions.

Is there a specific reason you don’t want to use those and replicate the work with waffle integration?

Post #1

BillBryson

Mostly because I am making use of the image transformations/versions that Waffle makes easy to do. If my situation were more direct upload and no any image manipulation I would use the those instructions.

Post #2

cenotaph

Regardless of your answer, there is no plug on LIve View. Transfer happens with the socket, help of JS and multipart binary form.

That is why cast is coming empty

Post #3

cenotaph

Do you use imagemagick for your modifications? If so it will just be an addition to the example code.

convert -define jpeg:size=200x200 original.jpeg -thumbnail 100x100^ -gravity center -extent 100x100 thumbnail.jpeg

defp consume_photos(socket) do
   ...
   File.cp!(meta.path, dest)
   System.cmd("convert", ["define", "jpeg:size"...... dest])
   ...
end

Post #4

BillBryson

I do see other people have had luck LiveView support · Issue #71 · elixir-waffle/waffle · GitHub and am trying to follow that example of building my own %Plug.Upload{} that then is passed into the changeset.

Yes, you are right that I could simply write my own image conversions, but our team preference is to use a standardized library that has tests/documentation.

Post #5

kokolegorille

The path is the filename… You might have to copy the file to a tmp file, then use it in Plug.Upload.

Post #6

BillBryson

Oh do I have this mixed up? Should it be:

%Plug.Upload{
    content_type: "image/png",
    filename: "/var/folders/mt/9c2zqzy93tg5xfl7317j7m340000gn/T//plug-1619/live_view_upload-1619366353-634670199203471-4"
  }

Post #7

kokolegorille

Maybe, You should try

I remember having this issue too. Until I realized path was the filename.

But I do not remember why I think it was easier to make a copy first, instead of using the tmp file directly.

Post #8

BillBryson

Sorry I was away from the computer. I have tried this now still with no luck. I did compare the contents of the %Plug.Upload{} without LiveView:

...
    "image" => %Plug.Upload{
      content_type: "image/png",
      filename: "post-image.png",
      path: "/var/folders/mt/9c2zqzy93tg5xfl7317j7m340000gn/T//plug-1619/multipart-1619366663-722432590674384-4"
    }
...

This does work without live view. And changing the path to filename did not work. I will try the copy to a tmp file and then use that in the %Plug.Upload{}. I am still not sure why this does not work.

Post #9

— All posts loaded —