I am trying to create a form builder using LiveView. Users can build form using drag a drop field types. One of the field types is File. Users can have multiple File type fields in one form. Now I am rendering the form using a form element.
Since I don’t know how many file type fields the user has in the form, I am trying to use a live component for file upload. This live component has its own form.
The problem is this causes nested forms. One parent form and another form for file upload. Sometimes this works. Sometimes the parent form doesn’t submit at all (due to form nesting).
Can anyone suggest how to solve this problem of dynamic file uploads.
Note: My file uploads are working without any problem. Its just the parent form that doesn’t get submitted due to nesting.
HTML does not allow nested forms, so you’d need to find a way to use just a single form. But if you’re using live uploads the live_file_input doesn’t even need a f form from form_for, so you should be able to wrap that specific one without form anyways.
You never want to create atoms based on user input. You’ll likely want to keep an additional lookup table for mapping from your user input to the atom names used. The same is the case for changesets as well btw. They also only work with atom field names.
I know I am asking too much, but when you have time, can you please share some code of how to do that. Just take a simple example of “field_1”. How do I access this in the @uploads object. Thanks very much.
This still uses String.to_atom. You never want to do that with user supplied strings. Atoms are never garbage collected so this is a DoS attack vector. Use e.g. a map as a lookup table for using a fixed set of atoms only.
Something akin to this, but likely dynamically created:
I’m struggling with a similar issue where a user can add multiple attachments each with their own set of other fields in addition to an uploaded file. From what I can tell to uploads key must be an atom. Passing a string throws an error (no function clause).
There’s an is_atom guard on the allow_upload/3 function. Am I missing something?