A single-page form where some fields change depending on the file the user picks to upload: Possible?

Transloadit
1

Archived from the Transloadit support forum. Originally posted on September 9, 2011; details may be outdated, see our docs for current behavior. Original thread

Hi all. I got a project for a client where I can finally try and use Transloadit :smiley:

Does anybody here know whether it’s possible to accept uploads from within a form without actually submitting the main form? As if it were “a form inside a form”. I know the short answer is “no” :slight_smile:

The scenario is a Javascript intensive form with many fields, some being multimedia uploads, and some fields and fieldsets depending on whether the user did actually upload a file or not in some of these upload fields.

Another way to put it: a single-page (single-submit) form where some of the fields dynamically change depending on the format of the file the user has chosen to upload.

Using frames or iframes is not an option. As I think this is not possible, because the upload actually starts when the user submits the form, I assume I will have to build it in two steps, but would be a notable usability drawback, as the upload could take minutes to finish and therefore the user will have to wait to see the sencond step of the form.

Perhaps the clever guys at Transloadit allow to close the connection just after sending the beginning of the file (enough for detecting it’s type), but that would still be a two-submit process, and wouldn’t allow things like displaying a thumbnail of the upload while the user fills in the rest of the fields.

Comments are welcome.

2

Hey Jaime,

we had a similar situation for one of our clients. What we did is build a two step form, but show the first part as soon as the upload starts. Then the user can first pick the file(s) to upload and add the meta information while they are uploading.

Also you can use the change event of the file input field to detect the names of the selected files and then change the DOM of your form depending on their file extension. This might not work so well with multifile uploads though as the input.value would equal the name of the first selected file.

Let me know if that helps.

Kind regards,
Tim

3

Thank you, Tim. I will suggest the client a redesign of the workflow to handle the submission in two steps as you suggested.

4

Alright, closing this.