File transfer with Apache2::Upload and XMLHttpRequest

--Apple-Mail-1--789621525
Content-Transfer-Encoding: quoted-printable
Content-Type: text/plain;
charset=us-ascii

I tried to switch from the 'common' way to send a file to the server, =
which is in my case:

a) define a form with an file-input-element:

<form method=3D"post" action=3D"gallery?action=3Dupload_image" =
enctype=3D"multipart/form-data">
<input type=3D"file" name=3D"file"/>
<input type=3D"submit" value=3D"Submit" />
</form>

b) define mod_perl code, that saves the file-data inside a handler, =
something like:

my $apr =3D Apache2::Request->new($r);
my $upload =3D $apr->upload('file');
....

That works fine as it is easy to work with $upload and save the data.
But I really can not figure out how to handle the XHR-Approach on the =
server-side because now, of cause, the 'file' param is missing.

The JS client side code is (where 'file' is a HTML5 File-Object):

var xhr =3D new XMLHttpRequest();
xhr.open("POST", url + "?filename=3D" + encodeURIComponent(file.name), =
true);
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.send(file);

Any idea how now the server side part has to look like now?

Thanks, Michael=

--Apple-Mail-1--789621525
Content-Transfer-Encoding: quoted-printable
Content-Type: text/html;
charset=us-ascii

<html><head></head><body style=3D"word-wrap: break-word; =
-webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">
<span class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><span style=3D"font-size: 9pt; "><span =
style=3D"font-family: verdana, geneva; "><span style=3D"background-color: =
transparent; "><span style=3D"color: rgb(0, 0, 0); "><span style=3D"color:=
rgb(0, 0, 0); "> I tried to switch from the 'common' way to send a =
file to the server, which is in my case:<br><br>a) define a form with an =
file-input-element:<br><br></span></span></span></span></span></span><span=
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><form method=3D"post" =
action=3D"gallery?action=3Dupload_image" =
enctype=3D"multipart/form-data"></span><span class=3D"Apple-style-span"=
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">    <input =
type=3D"file" name=3D"file"/></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">    <input =
type=3D"submit" value=3D"Submit" /></span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><br></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"></form></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; "><br></span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; ">b) define mod_perl code, that saves the file-data =
inside a handler, something like:</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; "><br></span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; ">    my $apr =3D =
Apache2::Request->new($r);</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">    my $upload =3D =
$apr->upload('file');</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">    ....</span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><br></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">That works fine as it is easy to =
work with $upload and save the data.</span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><br></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; ">But I really =
can not figure out how to handle the XHR-Approach on the server-side =
because now, of cause, the 'file' param is missing.</span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><br></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">The JS client side code is (where =
'file' is a HTML5 File-Object):</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; "><br></span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; ">var xhr =3D new XMLHttpRequest();</span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><br></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
">xhr.open("POST", url + "?filename=3D" + =
encodeURIComponent(</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; "><a =
href=3D"http://file.name/">file.name</a></span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; ">), true);</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">xhr.setRequestHeader("Content-Type", =
"multipart/form-data");</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">xhr.send(file);</span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; "><br></span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; ">Any idea how now the server side =
part has to look like now?</span><span class=3D"Apple-style-span" =
style=3D"font-family: verdana, geneva; font-size: 12px; =
"><br></span><span class=3D"Apple-style-span" style=3D"font-family: =
verdana, geneva; font-size: 12px; "><br></span><span =
class=3D"Apple-style-span" style=3D"font-family: verdana, geneva; =
font-size: 12px; ">Thanks, Michael</span></body></html>=

--Apple-Mail-1--789621525--
Michael Wichmann [ Mi, 28 Juli 2010 12:26 ] [ ID #2045252 ]

Re: File transfer with Apache2::Upload and XMLHttpRequest

Michael Wichmann wrote:
> I tried to switch from the 'common' way to send a file to the server, which is in my case:
>
> a) define a form with an file-input-element:
>
> <form method="post" action="gallery?action=upload_image" enctype="multipart/form-data">
> <input type="file" name="file"/>
> <input type="submit" value="Submit" />
> </form>
>
> b) define mod_perl code, that saves the file-data inside a handler, something like:
>
> my $apr = Apache2::Request->new($r);
> my $upload = $apr->upload('file');
> ....
>
> That works fine as it is easy to work with $upload and save the data.
> But I really can not figure out how to handle the XHR-Approach on the server-side because now, of cause, the 'file' param is missing.
>
> The JS client side code is (where 'file' is a HTML5 File-Object):
>
> var xhr = new XMLHttpRequest();
> xhr.open("POST", url + "?filename=" + encodeURIComponent(file.name), true);
> xhr.setRequestHeader("Content-Type", "multipart/form-data");
> xhr.send(file);
>
> Any idea how now the server side part has to look like now?
>
No, because your way of sending the file to the server does not match the Content-Type.
A multipart/form-data content type implies that the body of your POST should look like a
MIME message, where each part has its own set of headers and a body.
Here you are apparently just sending the file, as is.
It is a bit more complex than that.

Maybe search in Google for "ajax file upload" or something of the kind, to find a
javascript library that would do that ?
aw [ Mi, 28 Juli 2010 13:49 ] [ ID #2045253 ]
Webserver » gmane.comp.apache.mod-perl » File transfer with Apache2::Upload and XMLHttpRequest

Vorheriges Thema: perl-script vs cgi-script
Nächstes Thema: PerlSetEnv vars not available in PerlRequire script