How do I modify the upload content before the upload?

Did you find a way to do it?

You can achieve that with custom client side JS, before submitting you have files available for manipulation.
Usefull links: LiveView Upload docs

Sorry I am not able to figure that out. How to do it? By using Hooks?
Where are the files stored? Would be very grateful if you can share some code sample.
Thanks.

I’m not sure what your use case is, but you can send events back and forward to preform some actions.
Here you can find example code for uploading files, and you can put some logic in validate to send client side some data or w/e you need and then handle push event on client and preform action on images or something else.

Thank You for the input.
I just want to downsize large images.
I can send events and recieve them on the client.
But I am not sure where the files are located that I need to modify.

I am thinking that for external uploaders live view provides a Uploader with entries. That might be a place to modify the files.

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

Yes, I scale the image using client side js and store the result in a blob. Then I chunk the blob, basse64 encode them, and send the chunks in-band in with pushEvent

See here for the js part:

https://github.com/derek-zhou/gara/blob/main/lib/gara_web/components/header.hooks.js

To be clear, you have to do all these extra steps because you want to modify the file client-side and then upload it to your webserver and not to cloud storage, correct?

I wonder if LiveView should support a client-side callback for server uploads

Yes. My way does not make the best use of the bandwidth, and it is streaming binary data from browser memory to server memory, so it won’t work for large files. On the other hand, it is fairly simple and there is no need to cleanup should the user navigate away.

The only thing I wish from Liveview is the support for binary messages without resorting to base64. I could use a raw socket but then I need to deal with coordination between 2 processes.

That would be very welcome. Especially for common use cases like resizing images before uploading (especially on mobile devices).