Pro Image Uploads

Image uploads

Allow images to be uploaded to the cloud

Live view has the ability to upload files. We have created a component to help with uploading a single image. This is useful for things like a user’s avatar.

elixir
<!-- An example of the image upload component -->

<ImageUpload.image_input
upload={@uploads.avatar}
label={gettext("Avatar")}
current_image_src={user_avatar_url(@current_user)}
placeholder_icon="hero-user"
on_delete="clear_avatar"
automatic_help_text
/>

The <.image_input> component

For the full example, check out edit_profile_live.ex and edit_profile_live.html.heex.

Choosing an image upload hosting provider

We have provided configuration for two hosting options: Amazon S3 and Cloudinary.

Amazon S3

Follow the instructions in lib/petal_pro/file_uploads/s3.ex to get started.

Cloudinary

Follow the instructions in lib/petal_pro/file_uploads/cloudinary.ex.

Our recommendation

We recommend Cloudinary over S3 due to the fact it can do transforms on the fly simply by manipulating the URL. To do transforms in Elixir, you can use the cloudex library.

For example, you can do the following:

shell
  iex> Cloudex.Url.for("a_public_id")
  "//res.cloudinary.com/my_cloud_name/image/upload/a_public_id"

  iex> Cloudex.Url.for("a_public_id", %{width: 400, height: 300})
  "//res.cloudinary.com/my_cloud_name/image/upload/h_300,w_400/a_public_id"

  iex> Cloudex.Url.for("a_public_id", %{
    crop: "fill",
    fetch_format: 'auto',
    flags: 'progressive',
    width: 300,
    height: 254,
    quality: "jpegmini",
    sign_url: true
  })
  "//res.cloudinary.com/my_cloud_name/image/upload/s--jwB_Ds4w--/c_fill,f_auto,fl_progressive,h_254,q_jpegmini,w_300/a_public_id"

Notice you work with “public_ids” - these are ids provided by Cloudinary. You should store these in the database instead of the URL. For example:

elixir
cloudinary_public_ids =
  consume_uploaded_entries(socket, :avatar, fn %{fields: fields}, _entry ->
    {:ok, fields["public_id"]}
  end)

public_id = hd(cloudinary_public_ids)

# save public_id to the database