Waffle with LiveView

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:

  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.

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?

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.

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

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])

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.

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

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

    content_type: "image/png",
    filename: "/var/folders/mt/9c2zqzy93tg5xfl7317j7m340000gn/T//plug-1619/live_view_upload-1619366353-634670199203471-4"

Maybe, You should try :slight_smile:

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.

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.