Waffle with LiveView

Phoenix Forum Questions / Help
, ,
1

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.

2

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?

3

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.

4

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

5

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
6

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.

7

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

8

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"
  }
9

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.

10

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.