File previews/image thumbnailing
Unclear if this is a feature request, seeking advice, or a free startup idea, but... it'd be cool to have an endpoint that serves cached auto-generated previews of files in Convex storage, especially images. I think this might be a rather common, yet labor-intensive to do well, need.
Maybe the simplest way to implement this would be as an HTTP action, with an associated table to keep track of the generated previews? Could become a new helper in
convex-helpers ?4 Replies
@Michal Srb any chance this might be on your roadmap? 🙂
I think this is a "component" we might build soon, cc @ian
I think it'd be awesome, but "soon" here is not likely in the next month or two, so very open to folks building this & sharing it. The way I'd do it:
- have a table keeping track of previews, as you mention. Have the storage ID of the original and the storage ID(s) of generated versions
- On upload, generate various resolutions using a cloud service or some npm library in an action, and write the resulting storage ids to the table
- On serving, either permanently redirect to the storage URL of the preview, or just serve it directly, using a query param to decide what resolution. Make sure to add caching headers so the browser doesn't fetch more than it needs to. I'd use CSS for cropping rather than doing the cropping server-side unless you have super specific needs. In which case I'd crop and save that as another storage ID.
Given that you may likely end up using a CDN to reduce bandwidth usage, the 3rd party image service could maybe take care of the thumbnail generation and CDN. I use ImageKit myself.