One option is to use a hidden <.live_file_input /> and then use this.upload() on a client-side hook to enqueue the resized file. Here is a brief example:

In your HEEx template:

<!-- Users select files with this file input. -->
<input type="file" id="resize-target" phx-hook="ResizeInput" data-upload-target="images" />

<form phx-change="change" phx-submit="submit">
  <!-- The live file input is hidden because users will not interact with it directly. -->
  <.live_file_input upload={@uploads.images} style="display:none;" />
  <button type="submit">Upload</button>
</form>

…and the ResizeInput hook:

// assets/js/resize_input.js
import { convertResizeImageFiles } from './image_utils'

// This hook attaches to a custom input element to resize selected images.
export default ResizeInput = {
  getUploadTarget() { return this.el.dataset.uploadTarget },
  mounted() {
    this.el.addEventListener("change", (e) => {
      e.preventDefault()
      e.stopImmediatePropagation()

      if (this.el.files && this.el.files.length > 0) {
        convertResizeImageFiles(this.el.files, 300, (resizedImageBlob) => {
          // Enqueues the resized blob on the <.live_file_input />.
          this.upload(this.getUploadTarget(), [resizedImageBlob])
        })
      }
    })
  }
}

I put the visible file input outside of the live form so that its change events don’t trigger additional messages to the server.

You can find a working demo in my live_upload_example repo: Add client-side resize demo · mcrumm/live_upload_example@5c797aa · GitHub

Hope that helps!

PS– Please forgive my JavaScript. The convertResizeImageFiles callback should really receive a list of files, that way the upload function would only need to be invoked once for each batch of selected files, however I am currently on vacation so this is the best I could do on short notice

This is very nice and can be used to consume files directly on the server instead of loading to an external storage.
Thank you so much for sharing (while being on vacation, really appreciate it.).
Enjoy your vacation.

I was just sharing with someone about this yesterday.

In short, yeah everything is done client side via hooks.

In one example I load an image with a wasm lib via a canvas on the dom, that is used to resize.
The other, I upload file to a bucket, call third party scale api with bucket path, download scaled image back to clients re-upload with new signed url.

Edit: I should add its easy to overload the browser in the case of the canvas/wasm workflow.
On a phone loading several 24mb sized images in to canvas has been able to crash a mobile browser really fast and given the size of raw phone images now it was a common issue I seen. The better of the two approaches I found was to use a signed url to throw the image at a buck then trigger a worker to async resize the image and fetch it later and or move it from a temp bucket to a permanent place. Uploading large files to a bucket is a non issue and its was better to have a back up of the source upload in my case too. I also found minio for self hosting buckets which made going the object store approach a lot for effective for me. That said I would love it if there was a really good full client side solution to this. Y