Using allow_upload, whats the process of modifying files before upload?

I am quite confused, so sorry if my question is also confusing.

I’ve been using the below to deal with general uploads with no issues, but I was wondering if its possible to edit/modify files before uploading them?

My understanding of the below is that the presign_upload is stored as a function in the uploadconfig that is called when you actually hit save? Is this correct or incorrect? If correct that means I can modify the uploaded image and the function will just run with whatever is in the socket? If you wanted a user to create an avatar of a set height/width, they could upload a larger image and align it with a box of said height/width to crop the image.

|> allow_upload(:avatar, accept: ~w(.jpg), max_entries: 1, external: &S3Upload.presign_upload/2)

I can figure out the image resizing, but I don’t know how you replace the original image that got uploaded with the resized image when used with the presign function basically or if its possible/practical.

I know the flow I would like to use, but the uploader process honestly confuses me so much I don’t know the best way to do it.

Any info on any of this appreciated.

(Redact it, please, I missed the s3 part of the question)

I’ve done this a few ways. Mostly its all done on the front end via hooks.

here’s some examples.

Front end UI:


JS callbacks.

In the js call back you can see how I get a signed url, send the file to a bucket, re request the same image via imagx to scale the image, then re-upload the new scaled image via a signed url, in short scaling the image via a 3rd party all done from the client side.

Not saying this a good example :joy: but its an example.

Here is a older example where I use a wasm lib to scale the image all 100% client side before I send to s3.
again this is done mostly via js and hooks. In this example I even pull out exif data from the image too.


Thanks for the detailed reply, Its nice to see how someone else has dealt with it.

I had figured out how to modify the image within the Uploader and had considered Uploading then re requesting the image but figured there must be a way to just modify the image before submission seperately.

My plan currently is to upload the file normally, then add a handle_event to get a crop starting value, pass that value to the uploader through meta and do some maths to crop the image to the correct size based on the starting position.

Probably going to go horribly wrong, but science is about blowing stuff up :slight_smile:

Thanks again.

1 Like

Did it go horribly wrong? I hope not! Curious how things went