🖼
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.
<!-- 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={: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.
Follow the instructions in
lib/petal_pro/file_uploads/s3.ex to get started.Follow the instructions in
lib/petal_pro/file_uploads/cloudinary.ex. 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:
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:
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
Last modified 3mo ago