{"items":[{"children":[{"children":[{"properties":{"category":["caddy","elixir","phoenix","waffle"],"content":[{"html":"

A short tutorial how to configure uploads with Phoenix Framework.

\n

The problem

\n

It's confusing because there are different system which work with different paths:

\n\n

Configuration

\n

Waffle

\n

In our config.exs, we define the default path for uploads. This is only used for dev and test environments.

\n
config :waffle,\n
  storage: Waffle.Storage.Local,\n
  storage_dir_prefix: "priv/waffle/public"\n
\n

For production, we place a UPLOAD_DIR variable in our .env file which will then replace our storage_dir_prefix option:

\n
upload_dir =\n
  System.get_env("UPLOAD_DIR") ||\n
    raise """\n
    environment variable UPLOAD_DIR is missing.\n
    It should look like: /var/www/hajur/files\n
    """\n
\n
config :waffle,\n
  storage_dir_prefix: upload_dir\n
\n

Image Uploader

\n

I'm dithering all images and also create a smaller version as well as a very small thumbnail. The final filename is created by hashing the filename of the uploaded file. The storage_dir is the thing that needs to match the caddy configuration.

\n
defmodule Hajur.Content.ImageUploader do\n
  use Waffle.Definition\n
  use Waffle.Ecto.Definition\n
\n
  @versions [:original, :full, :thumb]\n
\n
  # Whitelist file extensions:\n
  def validate({_file, _post}) do\n
    true\n
  end\n
\n
  def transform(:original, _) do\n
    {:magick, "-auto-orient -colors 24 -dither FloydSteinberg -format png", :png}\n
  end\n
\n
  def transform(:full, _) do\n
    {:magick,\n
     "-auto-orient -resize 1280x1024> -background #ffffff00 -gravity center -extent 1280x1024 -colors 24 -dither FloydSteinberg -format png",\n
     :png}\n
  end\n
\n
  def transform(:thumb, _) do\n
    {:magick,\n
     "-auto-orient -resize 250x250> -background #ffffff00 -gravity center -extent 250x250 -colors 24 -dither FloydSteinberg -format png",\n
     :png}\n
  end\n
\n
  # Override the persisted filenames:\n
  def filename(version, {file, _post_image} = _scope) do\n
    hash = :crypto.hash(:sha, file.file_name) |> Base.encode16()\n
    "#{hash}-#{version}"\n
  end\n
\n
  # Override the storage directory:\n
  def storage_dir(_version, {_file, _post}) do\n
    "uploads/files/images"\n
  end\n
end\n
\n

Caddy

\n

I tried using rewrite without the wrapping handle block which did not work. In the end, I added the file_server directive. I have a feeling that that might have been the problem all along.

\n

We are matching for requests which begin with /uploads and rewrite them to the actual directory where uploads are placed by the server. This will rewrite a url like:

\n
https://inhji.de/uploads/files/images/somehash-full.png\n
\n

to

\n
/var/www/hajur/uploads/files/images/somehash-full.png\n
\n
inhji.de {\n
  @uploads path /uploads/*\n
  handle @uploads {\n
    file_server\n
    rewrite * /var/www/hajur/{path}\n
  }\n
\n
  reverse_proxy * localhost:9000\n
}\n
","value":"A short tutorial how to configure uploads with Phoenix Framework.\nThe problem\nIt's confusing because there are different system which work with different paths:\n\nBrowser: https://inhji.de/uploads/files/images/cat.jpg\n\nThis is the public path\n\n\nCaddy: /var/www/hajur/uploads/files/images/cat.png\n\nThis is the physical path of the image on disk\n\n\nWaffle Config: /var/www/hajur\n\nThis is the base path that all image files should be placed in\n\n\nImage Uploader: uploads/files/images\n\nThis is the specific path for this kind of image\n\n\n\nConfiguration\nWaffle\nIn our config.exs, we define the default path for uploads. This is only used for dev and test environments.\nconfig :waffle,\n storage: Waffle.Storage.Local,\n storage_dir_prefix: \"priv/waffle/public\"\n\nFor production, we place a UPLOAD_DIR variable in our .env file which will then replace our storage_dir_prefix option:\nupload_dir =\n System.get_env(\"UPLOAD_DIR\") ||\n raise \"\"\"\n environment variable UPLOAD_DIR is missing.\n It should look like: /var/www/hajur/files\n \"\"\"\n\nconfig :waffle,\n storage_dir_prefix: upload_dir\n\nImage Uploader\nI'm dithering all images and also create a smaller version as well as a very small thumbnail. The final filename is created by hashing the filename of the uploaded file. The storage_dir is the thing that needs to match the caddy configuration.\ndefmodule Hajur.Content.ImageUploader do\n use Waffle.Definition\n use Waffle.Ecto.Definition\n\n @versions [:original, :full, :thumb]\n\n # Whitelist file extensions:\n def validate({_file, _post}) do\n true\n end\n\n def transform(:original, _) do\n {:magick, \"-auto-orient -colors 24 -dither FloydSteinberg -format png\", :png}\n end\n\n def transform(:full, _) do\n {:magick,\n \"-auto-orient -resize 1280x1024> -background #ffffff00 -gravity center -extent 1280x1024 -colors 24 -dither FloydSteinberg -format png\",\n :png}\n end\n\n def transform(:thumb, _) do\n {:magick,\n \"-auto-orient -resize 250x250> -background #ffffff00 -gravity center -extent 250x250 -colors 24 -dither FloydSteinberg -format png\",\n :png}\n end\n\n # Override the persisted filenames:\n def filename(version, {file, _post_image} = _scope) do\n hash = :crypto.hash(:sha, file.file_name) |> Base.encode16()\n \"#{hash}-#{version}\"\n end\n\n # Override the storage directory:\n def storage_dir(_version, {_file, _post}) do\n \"uploads/files/images\"\n end\nend\n\nCaddy\nI tried using rewrite without the wrapping handle block which did not work. In the end, I added the file_server directive. I have a feeling that that might have been the problem all along.\nWe are matching for requests which begin with /uploads and rewrite them to the actual directory where uploads are placed by the server. This will rewrite a url like:\nhttps://inhji.de/uploads/files/images/somehash-full.png\n\nto\n/var/www/hajur/uploads/files/images/somehash-full.png\n\ninhji.de {\n @uploads path /uploads/*\n handle @uploads {\n file_server\n rewrite * /var/www/hajur/{path}\n }\n\n reverse_proxy * localhost:9000\n}"}],"name":["File Uploads with Phoenix Live View, Waffle and Caddy"],"published":["2026-04-26T23:14:12+02:00"],"summary":["A short tutorial how to configure uploads with Phoenix Framework.\nThe problem\nIt's confusing because there are different system which work with different paths:\n\nBrowser: https://inhji.de/uploads/files/images/cat.jpg\n\nThis is the public path\n\n\nCaddy: /var/www/hajur/uploads/files/images/cat.png\n\nThis is the physical path of the image on disk\n\n\nWaffle Config: /var/www/hajur\n\nThis is the base path that all image files should be placed in\n\n\nImage Uploader: uploads/files/images\n\nThis is the specific path for this kind of image\n\n\n\nConfiguration\nWaffle\nIn our config.exs, we define the default path for uploads. This is only used for dev and test environments.\nconfig :waffle,\n storage: Waffle.Storage.Local,\n storage_dir_prefix: \"priv/waffle/public\"\n\nFor production, we place a UPLOAD_DIR variable in our .env file which will then replace our storage_dir_prefix option:\nupload_dir =\n System.get_env(\"UPLOAD_DIR\") ||\n raise \"\"\"\n environment variable UPLOAD_DIR is missing.\n It should look like: /var/www/hajur/files\n \"\"\"\n\nconfig :waffle,\n storage_dir_prefix: upload_dir\n\nImage Uploader\nI'm dithering all images and also create a smaller version as well as a very small thumbnail. The final filename is created by hashing the filename of the uploaded file. The storage_dir is the thing that needs to match the caddy configuration.\ndefmodule Hajur.Content.ImageUploader do\n use Waffle.Definition\n use Waffle.Ecto.Definition\n\n @versions [:original, :full, :thumb]\n\n # Whitelist file extensions:\n def validate({_file, _post}) do\n true\n end\n\n def transform(:original, _) do\n {:magick, \"-auto-orient -colors 24 -dither FloydSteinberg -format png\", :png}\n end\n\n def transform(:full, _) do\n {:magick,\n \"-auto-orient -resize 1280x1024> -background #ffffff00 -gravity center -extent 1280x1024 -colors 24 -dither FloydSteinberg -format png\",\n :png}\n end\n\n def transform(:thumb, _) do\n {:magick,\n \"-auto-orient -resize 250x250> -background #ffffff00 -gravity center -extent 250x250 -colors 24 -dither FloydSteinberg -format png\",\n :png}\n end\n\n # Override the persisted filenames:\n def filename(version, {file, _post_image} = _scope) do\n hash = :crypto.hash(:sha, file.file_name) |> Base.encode16()\n \"#{hash}-#{version}\"\n end\n\n # Override the storage directory:\n def storage_dir(_version, {_file, _post}) do\n \"uploads/files/images\"\n end\nend\n\nCaddy\nI tried using rewrite without the wrapping handle block which did not work. In the end, I added the file_server directive. I have a feeling that that might have been the problem all along.\nWe are matching for requests which begin with /uploads and rewrite them to the actual directory where uploads are placed by the server. This will rewrite a url like:\nhttps://inhji.de/uploads/files/images/somehash-full.png\n\nto\n/var/www/hajur/uploads/files/images/somehash-full.png\n\ninhji.de {\n @uploads path /uploads/*\n handle @uploads {\n file_server\n rewrite * /var/www/hajur/{path}\n }\n\n reverse_proxy * localhost:9000\n}"],"updated":["2026-04-27T10:49:41+02:00"],"url":["https://inhji.de/posts/file-uploads-with-phoenix-live-view-waffle-and-caddy/mf2"]},"type":["h-entry"]},{"id":"main-sidebar","properties":{"name":["Jonathan"],"nickname":["inhji"],"note":["Jacked in since 1996."],"url":["https://inhji.de/"]},"type":["h-card"]}],"properties":{},"type":["h-screen"]}],"properties":{},"type":["h-screen"]}],"rel-urls":{"https://aperture.p3k.io/microsub/171":{"rels":["microsub"]},"https://bandcamp.com/inhji":{"rels":["me"],"text":"\n Bandcamp\n "},"https://chaos.social/@inhji":{"rels":["me"],"text":"\n Fediverse\n "},"https://codeberg.org/inhji":{"rels":["me"],"text":"\n Codeberg\n "},"https://git.inhji.de/inhji":{"rels":["me"],"text":"\n Git Server\n "},"https://github.com/inhji":{"rels":["me"]},"https://indieauth.com/auth":{"rels":["authorization_endpoint"]},"https://inhji.de/":{"rels":["me"],"text":"\n Jonathan\n "},"https://inhji.de/assets/css/app-1f12478d5a9377a7a35f1a48326d8f64.css?vsn=d":{"rels":["stylesheet"]},"https://listenbrainz.org/user/inhji":{"rels":["me"],"text":"\n ListenBrainz\n "},"https://musicbrainz.org/user/inhji":{"rels":["me"],"text":"\n MusicBrainz\n "},"https://tokens.indieauth.com/token":{"rels":["token_endpoint"]}},"rels":{"authorization_endpoint":["https://indieauth.com/auth"],"me":["https://github.com/inhji","https://inhji.de/","https://bandcamp.com/inhji","https://listenbrainz.org/user/inhji","https://codeberg.org/inhji","https://chaos.social/@inhji","https://musicbrainz.org/user/inhji","https://git.inhji.de/inhji"],"microsub":["https://aperture.p3k.io/microsub/171"],"stylesheet":["https://inhji.de/assets/css/app-1f12478d5a9377a7a35f1a48326d8f64.css?vsn=d"],"token_endpoint":["https://tokens.indieauth.com/token"]}}