Resize Image Uploads with LiveView

In this article we will see how to resize an image before uploading it to a Phoenix backend. We will do this by adding a profile image to the user in a basic Phoenix setup. This will take us through the process of modifying an existing schema, create and run a migration, write custom hooks, add file validation, and ultimately create a new file. So if you are up for the task and would like to follow along, here’s the resize/upload flow:

The logic flow of uploading an image. A user selects an image, it is then resized. This will initialize a validation from the client on the server. If it is valid the User will be allowed to submit the image, otherwise must choose another image.

Prerequisites and Setup

Run a postgres container: docker run --name phoenix_db -e POSTGRES_PASSWORD=phoenix_pwd -e POSTGRES_USER=phoenix_usr -d -p 5432:5432 postgres

If you do not have a Phoenix application, run: mix phx.new my_app

If phx.new is not a recognized mix-command, install the command with mix archive.install hex phx_new. At the time of writing, this will install version 1.7.10.

Setup the application to use the correct database credentails in ./config/dev.exs. Adjust in the top of the file so it corresponds with your docker container setup:

# …
# Configure your database
config :my_app, MyApp.Repo,
  username: "phoenix_usr",
  password: "phoenix_pwd",
  hostname: "localhost",
  database: "my_app_dev",
  stacktrace: true,
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

# …

With database configuration ready we can set up the database with mix ecto.create. We will then add a Phoenix LiveView authentication system by first running mix phx.gen.auth Accounts User users. And then run mix ecto.migrate.

Modify the User schema

We will have a profile image added to our new User model. The user will only ever have one of these and we will not preserve any kind of history beyond what the user currently has as their profile image. We plan to add a string field to the User model and schema to store the path for the image. Let’s create a migration file for this.

From the CLI we run mix ecto.gen.migration add_profile_image.

This creates a new file priv/repo/migrations/[timestamp]_add_profile_image.exs with the backbone for a migration-change. We will alter the table for users by adding a new field:

defmodule ArchAngler.Repo.Migrations.AddProfileImage do
  use Ecto.Migration

  def change do
    alter table(:users) do
      add :profile_image, :string

Next we will run this migration with mix ecto.migrate. Having updated the database schema for the users table, we now turn to update our model accordingly. The model is defined in ./lib/my_app/accounts/user.ex. Let’s adjust the schema:

defmodule MyApp.Accounts.User do

  # …
  schema "users" do
    # add the profile_image field here
    field :profile_image, :string


  # add a new changeset function for the new field by the end of the module:
  @doc """
  A User changeset for updating Profile Image
  def profile_image_changeset(user, attrs, _opts \\ []) do
    |> cast(attrs, [:profile_image])


With the updated User model, we should update the context as well. We find it in ./lib/my_app/accounts.ex. Add the following function to the module:

 @doc """
  Returns an `%Ecto.Chageset{}` for updating the user profile_image.
  def change_profile_image(user, attrs \\ %{}) do
    User.profile_image_changeset(user, attrs)

  def update_profile_image(%User{} = user, attrs) do
    |> User.profile_image_changeset(attrs)
    |> Repo.update()

This will be used to create a form for the LiveView component.

Update User Settings page

With updates to the User model, we can now update the LiveView component for the User Settings page. Currently the view has two forms: One for changing Email, and another for changing Password. We will add a new form for uploading and changing the Profile Image.

The logic flow of uploading an image. A user selects an image, it is then resized. This will initialize a validation from the client on the server. If it is valid the User will be allowed to submit the image, otherwise must choose another image.

We will find the LiveView component in ./lib/my_app_web/live/user_settings_live.ex. In its render function, we will add our new form. Insert the following code above the email-form.

        <div id="image-uploader-container">
            <div class="block text-sm font-semibold leading-6 text-zinc-800">Profile Image</div>
              accept="image/png, image/jpeg, image/jpg, image/webp"

          <%= if @image_error do %>
            <p class="text-red-500"><%= @image_error %></p>
          <% end %>
          <%= if @profile_image do %>
            <img src={@profile_image} alt="Profile Image" />
          <% end %>
          <div class="">
            <div id="image-preview-container">
              <%= if @resized_image_src do %>
                <img src={@resized_image_src} alt="preview resized image" />
              <% end %>


            <%= if @allow_image_upload do %>
              <.button phx-disable-with="Changing..." id="submit-image-btn" class="">
                Submit image
            <% end %>

      <%!-- below is Email-form --%>

Couple of things to note here: we are currently referring to Phoenix functions and socket assignments that currently do not exist. We are missing these functions in the LiveView component: validate_profile_image, which will be called for every change in the form. update_profile_image, which will be called upon form-submit.

The following socket assignments are missing: image_form, a form-map that holds the field we want to parse. image_error, a variable that we will add an error message to, if needed. profile_image, a variable that will hold the current profile image. resized_image_src, will hold a data URL of a resized image if validated. allow_image_upload, will be false until validated.

On top of these Elixir-related changes, we will also make use of LiveView’s JavaScript Interoperability capabilities via its hooks. We will need a Resize hook, which will be responsible to resize an image to within specified parameters, and once that is done, it will update the value of the hidden input field. Let’s start with the Elixir updates in the LiveView component (user_settings_live.ex). We will add the assignments first. These are added into the second mount function of the component:

def mount(_params, _session, socket) do
    user = socket.assigns.current_user
    email_changeset = Accounts.change_user_email(user)
    password_changeset = Accounts.change_user_password(user)

    # Let’s get the changeset for the image
    profile_image_changset = Accounts.change_profile_image(user)

    socket =
      |> assign(:current_password, nil)
      |> assign(:email_form_current_password, nil)
      |> assign(:current_email, user.email)
      |> assign(:email_form, to_form(email_changeset))
      |> assign(:password_form, to_form(password_changeset))
      |> assign(:trigger_submit, false)
     # Our new assigns are added here
      |> assign(:image_form, to_form(profile_image_changset))
      |> assign(:image_error, false)
      |> assign(:profile_image, user.profile_image)
      |> assign(:resized_image_src, false)
      |> assign(:allow_image_upload, false)

    {:ok, socket}

Next up would be adding the event handlers for validate_profile_image and update_profile_image. But for the validation part it would be best to have a separate module that can validate by file size and type. This module’s validate function can then be called in our LiveView component. Create the file ./lib/my_app/image_validator.ex with the following content:

defmodule MyApp.ImageValidator do
  def validate_image(data_url, allowed_file_size, allowed_file_types)
      when is_binary(data_url) and is_integer(allowed_file_size) and is_list(allowed_file_types) do
    # Extract the media type and the base64 part from the data_url
    [meta_data, base64] = String.split(data_url, ",")

    [media_type, _] = String.replace(meta_data, "data:", "") |> String.split(";")

    # Decode the base64 part and get the binary data
    binary_data = Base.decode64!(base64)

    # Get the file size in bytes
    file_size = byte_size(binary_data)

    # Get the file extension from the media type
    file_ext = String.split(media_type, "/") |> Enum.at(1) |> String.replace_suffix("", "")

    # Check if the file extension is allowed
    case Enum.member?(allowed_file_types, file_ext) do
      true ->
        # Check if the file size is less than or equal to 2MB
        case file_size <= allowed_file_size do
          true ->
            {:ok, data_url}

          false ->
            # Return an error message for invalid file size
            {:error, "Image size must be less than or equal to #{allowed_file_size}"}

      false ->
        # Return an error message for invalid file extension
        {:error, "Image file type must be jpg, jpeg, png, or gif"}

Let’s write out our event handler for validate_profile_image back in user_settings_live.ex:

  def handle_event(
        %{"user" => %{"profile_image" => profile_image}},
      ) do
    case MyApp.ImageValidator.validate_image(profile_image, 2 * 1024 * 1024, ~w(jpg jpeg gif png webp)) do
      {:ok, data_url} ->
         |> assign(resized_image_src: data_url, allow_image_upload: true, image_error: false)}

      {:error, message} ->
        {:noreply, socket |> assign(allow_image_upload: false, image_error: message)}

We can see how we are using pattern matching to unpack profile_image from the incoming parameters variable. This data is passed into the validate_image function, along with the maximum allowed file size (2MB) and allowed file types. As the function returns either an ok atom along with the image data, or an error and message, we will adjust the socket assignments accordingly.

Now, let’s add the event handler for update_profile_image in the same user_settings_live.ex, along with two helper functions:

  def handle_event(
        %{"user" => %{"profile_image" => profile_image}},
      ) do
    # Make sure that the image data is still valid
    case MyApp.ImageValidator.validate_image(
           2 * 1024 * 1024,
           ~w(jpg jpeg gif png webp)
         ) do
      {:ok, data_url} ->
        handle_update_profile_image(data_url, socket)

      {:error, message} ->
        {:noreply, socket |> assign(allow_image_upload: false, image_error: message)}

  defp handle_update_profile_image(profile_image, socket) do
    [meta_data, base64] = String.split(profile_image, ",")

    file_name = generate_file_name()

    image_binary = Base.decode64!(base64)

    destination =
      Path.join([:code.priv_dir(:my_app), "static", "uploads", Path.basename(file_name)])

    File.write!(destination, image_binary)

    src_path = ~p"/uploads/#{Path.basename(destination)}"

    prev_file_name = socket.assigns.current_user.profile_image

    case Accounts.update_profile_image(socket.assigns.current_user, %{profile_image: src_path}) do
      {:ok, _} ->
        # If update was ok, then remove previous image
        case String.length(prev_file_name) > 0 do
          true ->
            previous_file_path =


        # Send back the updated image path and reset upload assignments
          |> assign(:profile_image, src_path)
          |> assign(:resized_image_src, false)
          |> assign(:allow_image_upload, false)

      {:error, _} ->
        {:noreply, socket |> assign(image_error: "Could not update new image to user.")}
  defp generate_file_name do
    # Get the current timestamp in milliseconds
    timestamp = DateTime.utc_now() |> DateTime.to_unix(:millisecond)

    # Generate a random string of 8 characters
    random_string = :crypto.strong_rand_bytes(8) |> Base.encode64(padding: false)

    # Concatenate the timestamp and the random string with a dash

The new function will create a file in the directory at ./priv/static/uploads. Create the directory if it does not exist. Then define it as one of the allowed static directories with the function static_paths in ./lib/my_app_web.ex:

  def static_paths, do: ~w(assets fonts images uploads favicon.ico robots.txt)

We will be making use of a JavaScript LiveView Hook here as well. It will be mounted on a file-input and resize any incoming images and set the resulting data URL (including base64 bytestring) to the hidden input-field. When that is done, it will trigger a change-event on the form which in turn will trigger the validate-change hook in Phoenix.

Lets first create a JavaScript module that can resize an image. Create the file ./assets/js/image_resizer.js with the following content:

export function resizeImage(image, maxWidth, maxHeight) {
    let scale = 1
    let width = image.naturalWidth
    let height = image.naturalHeight

    if (width > maxWidth) {
        scale = image.width / maxWidth
        width = maxWidth
        height = image.height / scale

    if (height > maxHeight) {
        scale = image.height / maxHeight
        height = maxHeight
        width = image.width / scale

    width = Math.floor(width)
    height = Math.floor(height)

    const canvas = document.createElement("canvas")
    canvas.width = width
    canvas.height = height

    const context2D = canvas.getContext("2d")
    context2D.drawImage(image, 0, 0, width, height)

    return canvas.toDataURL();

The let’s create the Resize hook and use this function in ./assets/js/app.js:

// …
// add import for the resizeImage function
import { resizeImage } from "./image_resizer"

// Then create our hook
let Hooks = {}
Hooks.Resize = {
    mounted() {
        const maxWidth = 250
        const maxHeight = 250

        let imageInput = document.getElementById("profile-image-uploader")

        // Inspired by blog-post https://imagekit.io/blog/how-to-resize-image-in-javascript/
        imageInput.addEventListener('change', function (e) {
            if (e.target.files) {

                let imageFile = e.target.files[0];
                var reader = new FileReader();
                reader.onload = function (e) {
                    const image = new Image()
                    image.onload = () => {
                        const dataUrl = resizeImage(image, maxWidth, maxHeight)

                        if (dataUrl.length === 0) {

                        let resizedImage = document.getElementById("image-preview") ?? new Image()
                        resizedImage.setAttribute("id", "image-preview")
                        resizedImage.setAttribute("alt", "Preview")
                        resizedImage.src = dataUrl


                        hiddenInput = document.getElementById("profile-image-src-input")
                        hiddenInput.value = dataUrl
                            new Event("input", {bubbles: true})

                    image.src = e.target.result


// and let’s make it available to our LiveView socket:
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: Hooks})

// …

We see how we can set a preview image from the dataUrl produced by the resizeImage function and append it into a container in the DOM. We are also setting it as a value on the hidden input element. This alone won’t trigger the form to emit a change event, so we explicitly do that with a dispatchEvent on the element. That in turn will trigger the phx-change instruction which will emit the validate_profile_image event, and if all is valid then a “Submit image” button will appear.

In summary

Phoenix LiveView is all about reacting to events. We can attach hooks and event handlers on most elements we choose. In this scenario we upload a file indirectly via a LiveView form, which has hooks and events that takes care of resizing and validating uploads whenever a new file has been chosen.

We take care of resizing on the client-side. We emit a change-event on the form to initialize a server-side validation on the resized image data. If everything appears OK, the upload is greenlit on the client and the user may submit the image. Upon submitting a new event is taking place and we will again reaffirm that the image data is valid before we create a file, store the updated image path to the user and then remove the old image.

Here’s our updated User Settings page:

The current profile image is shown. It is a quokka in a lab coat hunched over a table with papers on it. The incoming file for uploading is below it. It shows a quokka in a labcoat holding a handful of macarons. All around it is raining macarons.