Basic image uploader

[Aierie]

Basic image uploader + validation of image.

Image editing + upload to storage to follow in separate PRs, may use cropper.js for image editing as suggested by @jurgenwerk.

To view the component easily, see /image-uploader-temp.

[Aierie]

I think loading and disabled states might be necessary, do you think they are @jurgenwerk?

[ef4]

This pattern is a hint that you could implement a modifier instead of a component to do this more easily.

See https://github.com/ember-modifier/ember-modifier

The did-insert modifier and friends are really more of a stepping stone to help people port classic Ember components to Glimmer components. Writing your own modifier is more expressive. They're especially good for integrating third-party DOM-manipulation libraries.

[ef4]

(It is unfortunately a little confusing that the ember-modifier addon doesn't ship in the default blueprint. IMO it should, and probably will eventually.)

[Aierie]

Will try and refactor this to a {{file-uploader}} modifier. Thanks @ef4!

[jurgenwerk]

Looks good!

One comment.

I think it would be good to relax the image dimensions and size requirements to allow selecting photos in common dimensions. It's a big friction and focus breaker when users need to go and resize their images before uploading.

Ideally we would take the user's image and resize it ourselves to fit our limits. Can this be easily done in the browser before we send it to the backend?

[Aierie]

Ideally we would take the user's image and resize it ourselves to fit our limits. Can this be easily done in the browser before we send it to the backend?

We could, but I think we would need an upsampling service in order to make enlarged/zoomed images look sharp. Users can make use of those themselves to resize and upsample if they are set on using smaller images.

I think setting minimum dimensions might be good in the meantime to guide the user to use better images. If we want to be lenient, failing the dimensions check could be ok, and just result in a warning that the image chosen is too small (or maybe nothing at all/we remove size validation - perhaps just a recommendation in text, rather than a requirement that is enforced is better?)

[jurgenwerk]

Actually my thinking was the other way around–users might wanna choose images larger than 200KB and I was thinking it would be a good idea to support that (and downsize to fit our limits).