multipart/form-data and prototype

20 views
Skip to first unread message

BrentNicholas

unread,
Sep 17, 2008, 1:14:17 PM9/17/08
to Prototype & script.aculo.us
I've read that Prototype can not seralize files that have been
selected for upload in the form. Found this out the hard way....
"Hrmm. Every thing else loaded... where's my file?"

Is this still the case?

I've read that most people do an iFrame solution.
Anyone have other ideas?

Thanks for your time,
BN

Matt Foster

unread,
Sep 17, 2008, 2:04:14 PM9/17/08
to Prototype & script.aculo.us
Greetings Brent,

Its not that Prototype has somehow neglected this aspect, but
simply the fact that an input type='file' cannot be transferred as you
have expected. Its value is a path, not the source of the file
itself. There are very strict rules on this input type for security
reasons. Javascript never has access to the source of the file so it
can't be placed into an XHR request. As you noted you can keep a
stateful web app and load the files via an off screen IFRAME. This
is the best approach while sticking to DHTML, there are more advanced
solutions using a Flash object but thus requiring your users to have
the plugin.

Regards,
Matt

BrentNicholas

unread,
Sep 17, 2008, 3:37:30 PM9/17/08
to Prototype & script.aculo.us
Matt,

Thanks for the reply. Yeah, I found that js can't get at the file
system and did a little looking around. I found this AJAX IFRAME
METHOD (AIM) at: http://www.webtoolkit.info/ajax-file-upload.html

At first glance it seems like a resonable solution, however now I have
to figure out how to get ColdFusion to gain access to the form var
that's passed over.

Thanks again,

BN
> > BN- Hide quoted text -
>
> - Show quoted text -

Matt Foster

unread,
Sep 18, 2008, 10:19:03 AM9/18/08
to Prototype & script.aculo.us
Using an iframe to upload a file isn't too difficult and can be done
with almost any server side language, you simply post the form to the
frame as any other submission, then instead of displaying the page in
the iframe, have a snippet of code to execute a javascript method in
the parent window.

window.parent.domManager.setMessage("File transfer successful");

That statement will be executed when the frame has finished processing
the file, I found that to be the easiest way.

window references the current window, being the iframe, parent
references the containing window, being the main browser window.
domManager being some object that has element references, setMessage
being a function to insert the string into one of those elements.

I can't remember exactly how the file transfer comes across in the
form struct, but <cfdump/> is your friend and should explain things.
I believe the file gets saved to a tmp directory, and the name of
input is the property of the form object that contains the path to
this file.

BrentNicholas

unread,
Sep 18, 2008, 12:26:47 PM9/18/08
to Prototype & script.aculo.us
Matt,

Thanks! This answered another post I had before checking up on this
one...

Thanks again!
BN
> > > - Show quoted text -- Hide quoted text -
Reply all
Reply to author
Forward
0 new messages