Hello Elixir Forum!
I have questions about migrating a client-side specific feature from a React app to Phoenix (or maybe to a traditional server-side app).

I have an existing app built with NextJS and Django (REST) and I’ve been considering to migrate it to Phoenix. But, some aspect of the app might be very well-suited to client-side nature of a React app, and I’m not sure if I can really migrate the whole thing to Phoenix.

Users can submit a product in a multi-step (multi-page) form, where they can upload images (and some other additional files) and edit them in an editor (made with fabric.js) where they can move around/resize the images. Every time it happens, another “preview” image is generated on the browser and will be displayed on the other pages in this multi-step form.

Everything happens on client-side: uploaded files and generated preview images are still being kept on the client until users actually hit submit, so the file is not being sent unnecessarily to the server if later on the user decided not to continue the process.

Question: how should I approach to do that on Phoenix?
What I can think of currently is to have the multi-page form, save every step of the form on a “draft” record and actually “publish” after the last submit button clicked. I can set up a scheduled job to remove all “draft” records (unfinished form submissions). But this approach would mean that every files uploaded & preview images generated to be saved on server and sent across the network, with the additional network to/from AWS S3 which I’m using.

I’m new to Elixir and Phoenix and not aware of commonly used libraries/patterns that might fit the problem well, so I need some suggestions would like to just migrate the React component to LiveView + some JS (if that’s possible), or embedding the React component, or rendering React component for this specific route with some other libraries I can found on this forum.