Media Library - Image URLs

[tomciopp]

Is your feature request related to a problem? Please describe.

As of right now when an asset is uploaded to beacon, it uses the filename from the user's computer with the following url structure.

/__beacon_media__/user-filename.webp

As it is currently structured this can cause an issue if someone accidentally uploads two different files with the same name. (i.e. Java the programming language vs the Island) This will try to resolve to the same file and we will get an internal server error.

Describe the solution you'd like
We should use the following url structure instead:

/__beacon_media__/images/:asset_id
/__beacon_media__/images/:asset_id/:alias

In this case alias is actually ignored by the backend so you could technically write anything but we would just default to the uploaded file's filename. Right now there's no way to update the filename, but ideally that value doesn't matter, it is just for SEO. I would also likely advise against having the file extension directly in the url. You could imagine that we would want the backend to transform images or render different file formats based on or dynamic resizing based on the size of the browser viewport.

See https://developers.cloudflare.com/images/transform-images/transform-via-url/ for inspiration.

(Cloudflare does this within the url, but it makes more sense to do it in params IMO)

Something like myblog.com/__beacon_media__/images/:uuid/beacon?format=webp&width=200&height=200 seems pretty future proof to me, but I would be open to hear any objections.

I've also prefixed the route with /images in case we want the media library to serve other assets like video, pdfs, word docs, excel files, etc.

We should probably also keep the original user upload around somewhere if we want to do additional transforms other than converting to webp.

Additional context