LogoLogo
v2.2.0
v2.2.0
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
    • 🌎Deploy to Fly.io
    • πŸ’³Adding a subscription
    • πŸ”’Creating Your Own API
    • πŸ”ŒContent Editor - adding your own plug-in
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ—ΊοΈGoogle Maps
    • Password Hashing for Windows
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • πŸ’³Stripe billing
    • Blog/CMS
    • πŸ””User Notifications
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ–ΌοΈImage uploads
    • πŸ‘₯Impersonation
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
    • πŸ”’REST API
Powered by GitBook
On this page

Was this helpful?

  1. Fundamentals

Image uploads

Allow images to be uploaded to the cloud

PreviousLayouts & MenusNextImpersonation

Last updated 6 months ago

Was this helpful?

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="hero-user"
  on_delete="clear_avatar"
  automatic_help_text
/>

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:

  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
πŸ–ΌοΈ
The <.image_input> component