File input not working after appending


I’ve got list of records that each have an active storage file attached to them. When rendering out the “new” row I render a file input tag. That file input tag is not sent to the server when the form is submitted. It works fine after the refresh of the page.

I also have setup a turbo frame that handles the delete, when you click “remove” a turbo stream is sent back with the new file input so the user can pick a new file. Regular text inputs work correctly, but anything with input type of “file” does not even get sent to the server.

I’m wondering if I’m running into a strange security issue with the browser not sending back file inputs that have been added to the Dom via innerHTML?

Any thoughts would be super helpful.


I figured it out.

Since I was adding items to the list but the original form tag exists outside of the turbo frame, it was not being updated when the file_field form helper was being used.

Forcing the outer form to always be multipart made it so that when I dynamically added form inputs to the list they would be submitted to the server correctly. This worked both on the “remove” button turbo frame and the add new item turbo frame.

Today I learned that rails automatically fixes your form to be multipart when you use the form builder file_field. While this is 100% helpful 90% of the time. When one starts to build a form piece by piece and forgets that this is how the internet works, it sends you in to a rabbit hole.

Now I know and I’ll leave this here incase anyone has the same problem in the future.