Best way to post files asynchronously with ExtJS

Question

Hi,

I basically have a form that the users filled in, and in which it's also possible to attach files. It's really equivalent to gmail actually: the files are sent while you're still typing the information in the form, and when you click on the final submit button, it waits for the files to be all transferred and submit the final fields.

My issue here is to submit these files during the process. My first idea was to first create a new FormPanel for each added file in order to be able to send them using a POST Ext.Ajax.request. Unfortunately, we can't embed a form in a form (and somewhat I thought that ExtJS would handle this differently, but I tried and t it's not).

I've seen a few controls on Internet using some Flash to do this, but this is not the way I want to do it. I would like to do it the same way as Google made it! Except having a progress bar, it's a nice feature but it's not mandatory :) Thank you for your help!

Answer 1

Hi,

Short answer: Don't nest the forms, have them side by side (or even created dynamically).

Longer:

When you think about it, you're doing something that's not an atomic operation. The upload of a file and the posting of the data on your form are (technologically speaking) 2 unrelated transactions. You provide the transactional context between them, like gmail does: you create a "draft" object, upload the files saying they belong to this draft, and finally post the rest of the form data and finalize the draft into a fully constructed object.

Of course, you have to do the management of all this, but that's not the question at hand.

The point is: Partition your UI in light of the "atomicness" that I described above. Don't mingle the operations of "file upload" and "final submit" into the same HTML Form / Ext FormPanel. (You can still make it visually the same conceptual UI for the user).

You can do the "Ext.Ajax.request" for the file uploads with ad-hoc-created forms.

You can check out Saki's example here.

Hope this helps :-)