[Arc/Waffle] Upload an image via ajax, how to set this image in a changeset

Questions / Help
1

Hey everyone, just a bit stuck on this problem.
So I upload an image via ajax, and i save it using a Waffle uploader: Uploaders.Article.Image.store(“my-image-name.jpg”).
Now the problem i’m having is I want to reference this image in my Article changeset, i.e. changeset = Article.changeset(article, %{image: file}), but I have no idea how to do this.
I’ve tried setting file = %Plug.Upload{filename: “my-image.jpg”}, but this doesn’t work. I really have no idea what else could work, so any insights would be greatly appreciated. Thanks!

2

Hi and welcome,

There is a package to do this…

3

hey kokolegorille! Should mention that i’m already using waffle_ecto, which works perfectly if i’m uploading an image directly (i.e. if i pass a %Plug.Upload straight into a changeset). The problem is that if i’m creating a new Article, there is no changeset that i can pass my ajax upload to (because the article hasn’t been saved yet). So first I have to save the image using Uploaders.Article.Image.store (which stores the file in the right directory of /images/articles/images), but i’m not sure how to reference this image using waffle_ecto in an article changeset

4

You want to pass the file into the changeset when you create your article. Don’t manually save it, let waffle_ecto handle that.

5

I’m not sure how to do this using live view, i keep getting “invalid path” when i try to use my javascript upload library, and i think even if i just use a normal file_input field, i also get this error
When i inspect the article_params in form_component.ex, the value for article[image] is empty

6

Just tried using the normal file_input field, and i get this in my article_params: %{“image” => “[object File]”} and [error] {:error, :invalid_file_path} (from Waffle possibly?)
I’m guessing this is a LiveView specific thing though, as file uploads worked completely normally on non-LV projects

7

Yes, LiveView doesn’t currently support file uploads. However, I have been using the workaround linked here to great success: https://github.com/phoenixframework/phoenix_live_view/issues/104#issuecomment-557849826

1 Like
8

Thanks bump, that solution is good enough for now