Uploading files through an ajax remote form?
iain duncan
an ajax form? I have a form widget that includes a file upload field,
and it works fine when I call the controller to display the form as if
it is a normal page and then submit as a normal page. But when I use the
the file field in the form as part of an an ajaxy dom element, the
remote form only posts the local filename to the server instead of the
file upload object. All the other form fields appear to post as normal.
Is there perhaps some trickery involved with file uploads that I'm
missing or don't know about?
Thanks!
Iain
Diez B. Roggisch
invisible iframe that has a name. The upload-form has to have this iframe as
target. Thus the request is send, and not the page is refreshed, but the
iframe is.
In a piece of Javascript you can then poll the iframe for e.g. a global
javascript variable that will be set by the result of the form-action. If it
is there, you know the upload has been finished.
Diez
Diez B. Roggisch
> On Thursday 29 March 2007 04:38, iain duncan wrote:
>> Has anyone ever had file uploads working with the remote form widget and
>> an ajax form? I have a form widget that includes a file upload field,
>> and it works fine when I call the controller to display the form as if
>> it is a normal page and then submit as a normal page. But when I use the
>> the file field in the form as part of an an ajaxy dom element, the
>> remote form only posts the local filename to the server instead of the
>> file upload object. All the other form fields appear to post as normal.
>> Is there perhaps some trickery involved with file uploads that I'm
>> missing or don't know about?
>
> Yes. I just created such a thingy myself. What you need to do is to create an
> invisible iframe that has a name. The upload-form has to have this iframe as
> target. Thus the request is send, and not the page is refreshed, but the
> iframe is.
Obviously the form has to be submitted "for real", not using AJAX.
Diez
iain duncan
I think I'm in over my head here. When you put a RemoteForm widget in a
dom element, and the user hits the submit button but the underlying page
does not change, is this not a "for real" submission? It make a POST to
a url, but does the file field not get posted the same way? I guess I
need to bone up on http.
Thanks
Iain
Diez B. Roggisch
> I think I'm in over my head here. When you put a RemoteForm widget in a
> dom element, and the user hits the submit button but the underlying page
> does not change, is this not a "for real" submission? It make a POST to
> a url, but does the file field not get posted the same way? I guess I
> need to bone up on http.
Not on HTTP, on browser behaviour. You make a post request (or get) with
remoteform - but by gathering the values from the form elements
yourself, instead of letting the browser do so.
But because java-script isn't allowed to access the hard disks contents,
you can't gather the data of the file to post.
So you need to rely on the standard way of browser form submission. And
to suppress the then mandatory reloading of the page, you target it at
an iframe that is invisible.
Diez
iain duncan
Thank you for the explanation. I promised Jorge I'd write a
crud-with-remote-form tutorial once I get this thing figured out, so
I'll have to incorporate image loading there too I think. If you have a
code example of this that you could post, that would be much appreciated
but if you don't have the time to do so, I understand.
Iain
Diez B. Roggisch
> crud-with-remote-form tutorial once I get this thing figured out, so
> I'll have to incorporate image loading there too I think. If you have a
> code example of this that you could post, that would be much appreciated
> but if you don't have the time to do so, I understand.
The Image-Editor is a fully self-contained TG project that lets you
upload, edit and redisplay an image. Feel free to use.
http://roggisch.de/Image-Editor-Prototype.tar.bz2
Diez