LogoLogo
v2.0.0
v2.0.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
  • πŸ‘©β€πŸ³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
    • πŸ””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 9 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={: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

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

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

We have provided configuration for two hosting options: and .

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 .

πŸ–ΌοΈ
Amazon S3
Cloudinary
cloudex library
The <.image_input> component