form.send vs form.submit and files

I'm trying to upload a file. I have a form with an <input type=file> inside.


this is what i originally tried:

That code works great... for any <input> EXCEPT <input type=file>.

I found that I have to use

This code works fine to upload the file, but now I don't have the onSuccess event handler.

How can I get the best of both worlds??

somehow, i'm also having problems with making ajax work when it comes to file uploading. just so you know, form.send() is a shortcut method for using Ajax to send the form. form.submit() is already available in vanilla JS as a means to submit the form normally (w/o the user of ajax) without having to click the submit button of the form. form.submit() isn't a MooTools-originated method and therefore, won't necessarily know onSuccess() unlike form.send() where in .send() is actually a part of the MooTools Request class.

i know there are workarounds for this existing elsewhere, we simply need to google it up. i'm gonna do some investigating myself.

Yeah, submit is part of JS, not mootools. Why doesn't send do the same thing as submit? ie. handle enctype="multipart/form-data"?

on a side note... I'm able to use submit with the form ajaxy style by directing the output of the call to a hidden iframe. Note the target='upload_target' in the form. upload_target is just a hidden iframe. This allows the user to submit the form, while not leaving the page:



maybe we can add some sort of listener to the iframe?

As far as i know the XmlHttpRequest Object which is the core of every ajax call only supports get and post as methods, but for file transfer is the put method necessary. You already found a proper solution with that hidden iframe and to have event handling it should be possible to listen at the onLoad event of the iframe and i guess one parameter of the callback function is the content of the iframe, so you could send json data.