Ajax image upload and image resize run time

Phoenix Forum Questions / Help
, ,
1

I want to create image upload just like Facebook profile image or what’s app profile image to show image upload progress and resize image to fit into thumbnail image. Store image URL in db.

Please suggest how to to?

2

Well on the backend side it’s fairly easy there, things like the Waffle library and so forth simplify more of the work. As for the front-end, that’s well beyond phoenix’s scope and is generally determined based on what framework that you are already using there?

3 Likes
3

What is the link of Waffle library and how to add it in Phoenix?. Is Phoenix have any inbuilt image upload plugin. Please suggest?

4

https://hexdocs.pm/waffle/api-reference.html

4 Likes
5

I’m using mogrify / ImageMagick for imageprocessing in the backend, but no ajax frontend (wanna use phoenix liveview later)

2 Likes
6

You want to display image editor similar to the FB one? Or you want to resize image after the upload?

7

I have a page where I have user’s email , name and his profile pic and there would be a pencil icon for edit. Once user will click on pencil icon I want to change user his profile pic and his name or email.

In my layout there is no submit button which use will click after editing all, so want to know how to achieve it. I am assuming that I have to use Ajax call to update profile image, name or email …

Is there any tutorial which help me to achieve it?

8

In the documentation URL: https://hexdocs.pm/phoenix/1.3.0-rc.1/file_uploads.html

I have found that for image upload I have to use a form with multipart form data enabled but when I use the form it shows me error as shown below:

[error] #PID<0.666.0> running MyAppWeb.Endpoint (connection #PID<0.665.0>, stream id 1) terminated
Server: localhost:4000 (http)
Request: GET /playgame
** (exit) an exception was raised:
    ** (ArgumentError) assign @changeset not available in eex template.

Please make sure all proper assigns have been set. If this
is a child template, ensure assigns are given explicitly by
the parent template as they are not automatically forwarded.

Available assigns: [:conn, :current_user, :user_token, :view_module, :view_template]
9

waffle looks more like carrierwave, ror devs may find it easy

10

https://cloudinary.com/ is great for this and has a heafty free usage, simply upload the image and call the api with dimensions to return an image of desired size.Not a code solution but worth a look

1 Like
11

I have fresh experience with this topic, and it’s incredibly easy to implement with services like Uploadcare, Cloudinary, and a few others.

Here is all I needed to do:

  1. include Uploadcare js library and a hidden input tag into my form
<input type="hidden" role="uploadcare-uploader" name="post[image_url]" data-image-shrink="1024x1024" />
  1. add image_url string field to Post struct, adjust changeset cast
  2. obviously add <img src=<%= @post.image_url %>/> to show template

That’s it!

Basically the js will show Upload button, show full upload interface with drop area etc., possibly also cropping before upload, then performs the Ajax upload and just puts the hosted image url into your form, so that you can submit it and save it in db.

Full blown image upload solution, including client side resizing before upload (that’s the data-image-shrink attribute), and obviously all the other goodies like delivery of image in multiple sizes, cropping on delivery, applying effects, etc. etc.

It does cost money. But the solution is so easy and elegant, no fiddling with imagemagick, s3 and whatnot, which feels like prehistoric approach. I love it now. I though it might be worth sharing.

1 Like
12

Hey could you show a working example with this?
I’ve just chosen uploadcare and trying to implement a simple form to store the uploaded urls