Ajax image upload and image resize run time

Phoenix Forum Questions / Help
, ,
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