FileUpload Remix Component

[floral grove]

Hey guys, i'm trying to build a component for the Fileupload. The normal Fileupload from Sergiodxa.com is working in my App. But in my Fantasy there is a complete Component, which handels the Action and Loader inside of the component - but i know that a component got no Action or Loader... the next problem is, that i need my formData in the component, cause im adding the files into the formData to recieve the data in my action.

Is there any way or idea how to build a wonderful all in one file upload component?

Thanks for help!

Best regards

Steven

[spiral falcon]

If you’re looking to make just a file upload happen and not attach extra data it would be easiest to just make a form that includes the file upload you want and then open an endpoint action to accept that file upload. Kent has a good mental model for the type of thing you’re interested in and he calls it’s “full stack components”

https://www.epicweb.dev/full-stack-components

Maybe that can get your ideas flowing for the type of component you’d like

But I think it would not be very straightforward to make a file upload form that takes a bunch of arbitrary other form data fields. That seems a bit more difficult or at least requires a fair amount more branching at which point I’d just recommend opening a different route so each action has a clear and simple “happy path” of execution

[floral grove]

yeah thx buddy, i already looked at the epic stack for some ideas- but in fact they using own routes for the file upload - and im not sure if i like that... but thanks for your response!

[spiral falcon]

Sadly with remix it is all route based. So you can’t “generically” implement a file upload that just happens outside of a route context. The closest you’ll get to that is the Full stack components I linked. Outside of that you have to try something like NextJS and their use of RSCs which are currently experimental

Remix is also turning its attention to RSCs but we are probably a few months out from real support

[floral grove]

na its fine man, thank your for your answer, i could not figure out a way in my head either, maybe its because there is no good way for this 🙂

[spiral falcon]

Keep your eye on RSCs, it’ll probably be the closest answer to what you want in the long term, but again, we’re not quite there and RSCs have their own drawbacks

Having tried out the app router with NextJS there’s a lot of pain in application structure currently