I'm working on a page with some forms in it. I've made a wireframe to clarify my question.
As you can see I have multiple file uploads. To upload a file to my amazon s3 bucket I use transloadit. Transloadit works like this:
<form id="uLogoForm" action="/quiz/design" enctype="multipart/form-data" method="POST">
<input type="file" name="logo">
</form>
When I select a file and press "Select" transloadit will automatically upload it to amazon s3 and a post will be submitted where I save the link to the uploaded image in my database.
As you can see I have already 3 forms on my page, because I have three file uploads ... .
Besides that I have other input fields and a selected value that needs to be saved when I press "Save" on the bottom of the page.
What's the best practice for doing this? One form with multiple subforms, or not?
Not sure if I'm missing the point, but since there is 1 save button, why not set
triggerUploadOnFileSelection
tofalse
, and add 3<input type="file">
tags inside a single form? Transloadit can handle multiple file uploads with one form.