Smalltalk › Frameworks & Tools › Seaside › Seaside General

Value of a fileUpload element?

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

6 messages Options

Jan van de Sandt

Value of a fileUpload element?

Hello list,

I am creating a form which includes a fileUpload element. Whenever the user changes the file I want to receive a callback with the new filename so I can do some server-side changes like setting the correct Content-Type etc.

I am using Seaside 2.9.0-alpha2 with JQuery.

Currently the fileUpload code looks like this:

            html paragraph: [
                html fileUpload
                    id: (uploadId := html nextId);
                    name: 'file';
                    onChange: ((html jQuery id: 'pid') load
                        addParameter: 'dummy' -> ((html jQuery id: uploadId) value);
                        html: [ :h | self hanldeNewFile: h. h text: 'Haai' ])].

I can add the filename to the callback url using addParameter: but I don't know how to read this parameter from the callback Smalltalk code. I also tried to "serialize" the fileUpload element but this doesn't seem to work for file input elements.

Can anobody tell me how I can read the parameter value from the callback block?

Regards,
Jan.

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Lukas Renggli

Re: Value of a fileUpload element?

> Currently the fileUpload code looks like this:
>
> html paragraph: [
> html fileUpload
> id: (uploadId := html nextId);
> name: 'file';
> onChange: ((html jQuery id: 'pid') load
> addParameter: 'dummy' -> ((html jQuery id: uploadId)
> value);
> html: [ :h | self hanldeNewFile: h. h text: 'Haai'
> ])].

File uploads and Javascript are hairy. You cannot easily serialize a
file and submit it through an AJAX request, due to security
restrictions in JavaScript. Some sites use a little IFRAME to be able
to make a traditional submit without having a full refresh of the
complete page. Other sites use a Flash or Java applet. Have a look at
the JQuery Plugins
(http://plugins.jquery.com/search/node/upload+type%3Aproject_project),
there are quite a few providing different solutions to this problem.

> Can anobody tell me how I can read the parameter value from the callback
> block?

#addParameter: is a low level function. It modifies the URL.

Use #callback:value: instead, this is the high level interface. It
expects a block that will be evaluated with the evaluation of the
Javascript object given as a second parameter. Look at the senders of
this method to see some examples.

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Jan van de Sandt

Re: Value of a fileUpload element?

Thanks for the tip Lukas. Now I have access to the right value using:

            html paragraph: [
                html fileUpload
                    name: 'file';
                    onChange: (html jQuery ajax
                        callback: [ :value | self handleNewFile: value ] value: (html jQuery this value))].

But for me this is only half the solution. Based on that value I need to update the values of some hidden input fields in the same form. How can I add the ajax update in the same onChange code?

As part of the Cloudfork project I am building some Seaside components that let you upload data directly to an Amazon S3 bucket (http://docs.amazonwebservices.com/AmazonS3/2006-03-01/index.html?UsingHTTPPOST.html). I already have a plain non-ajax version working. Now I'm busy with "ultimate AJAX S3 upload form". The idea is:

1 developer configures upload component with his aws access keys, bucket name etc.
2 when a user select a file the component receives a callback. in this callback he can check whether the file type is allowed and set other S3 upload parameters like the Content-Type.
3 when the user presses submit i want to submit the form using ajax and show a "please be patient..." message while the upload is in progress
4 when the upload is done S3 returns an XML document with success or error information, this should be translated to a user information message
5 and it should be possible to have multiple instances of this component present on a single webpage so multiple uploads can run in paralell.

Jan.

On Wed, Jan 14, 2009 at 5:39 PM, Lukas Renggli <[hidden email]> wrote:

> Currently the fileUpload code looks like this:
>
> html paragraph: [
> html fileUpload
> id: (uploadId := html nextId);
> name: 'file';
> onChange: ((html jQuery id: 'pid') load
> addParameter: 'dummy' -> ((html jQuery id: uploadId)
> value);
> html: [ :h | self hanldeNewFile: h. h text: 'Haai'
> ])].

File uploads and Javascript are hairy. You cannot easily serialize a
file and submit it through an AJAX request, due to security
restrictions in JavaScript. Some sites use a little IFRAME to be able
to make a traditional submit without having a full refresh of the
complete page. Other sites use a Flash or Java applet. Have a look at
the JQuery Plugins
(http://plugins.jquery.com/search/node/upload+type%3Aproject_project),
there are quite a few providing different solutions to this problem.

> Can anobody tell me how I can read the parameter value from the callback
> block?

#addParameter: is a low level function. It modifies the URL.

Use #callback:value: instead, this is the high level interface. It
expects a block that will be evaluated with the evaluation of the
Javascript object given as a second parameter. Look at the senders of
this method to see some examples.

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Lukas Renggli

Re: Value of a fileUpload element?

> But for me this is only half the solution. Based on that value I need to
> update the values of some hidden input fields in the same form. How can I
> add the ajax update in the same onChange code?

Try something along the following untested code (just wrote it here in Gmail):

> html paragraph: [
> html fileUpload
> name: 'file';
> onChange: (html jQuery ajax
> callback: [ :value | self handleNewFile: value ]
> value: (html jQuery this value);
script: [ :script |
script add: ((s jQuery id: 'form')
append: [ :h | h hiddenInput
callback: [ :v | ... ] ]) ]) ]

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Jan van de Sandt

Re: Value of a fileUpload element?

Yes, this works great. Thanks!

Cheers,
Jan.

On Wed, Jan 14, 2009 at 9:54 PM, Lukas Renggli <[hidden email]> wrote:

> But for me this is only half the solution. Based on that value I need to
> update the values of some hidden input fields in the same form. How can I
> add the ajax update in the same onChange code?

Try something along the following untested code (just wrote it here in Gmail):

> html paragraph: [
> html fileUpload
> name: 'file';
> onChange: (html jQuery ajax
> callback: [ :value | self handleNewFile: value ]

> value: (html jQuery this value);
script: [ :script |
script add: ((s jQuery id: 'form')
append: [ :h | h hiddenInput
callback: [ :v | ... ] ]) ]) ]

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

Boris Popov, DeepCove Labs (SNN)

RE: Value of a fileUpload element?

Looks like Gmail editor might soon replace all Smalltalk browsers...

-Boris

--
+1.604.689.0322
DeepCove Labs Ltd.
4th floor 595 Howe Street
Vancouver, Canada V6C 2T5
http://tinyurl.com/r7uw4

[hidden email]

CONFIDENTIALITY NOTICE

This email is intended only for the persons named in the message header.
Unless otherwise indicated, it contains information that is private and
confidential. If you have received it in error, please notify the sender
and delete the entire message including any attachments.

Thank you.
-----Original Message-----
From: [hidden email]
[mailto:[hidden email]] On Behalf Of Jan van
de Sandt
Sent: Wednesday, January 14, 2009 1:22 PM
To: Seaside - general discussion
Subject: Re: [Seaside] Value of a fileUpload element?

Yes, this works great. Thanks!

Cheers,
Jan.

On Wed, Jan 14, 2009 at 9:54 PM, Lukas Renggli <[hidden email]>
wrote:

> But for me this is only half the solution. Based on that value
I need to
> update the values of some hidden input fields in the same
form. How can I
> add the ajax update in the same onChange code?

Try something along the following untested code (just wrote it
here in Gmail):

> html paragraph: [
> html fileUpload
> name: 'file';
> onChange: (html jQuery ajax
> callback: [ :value | self
handleNewFile: value ]

> value: (html jQuery this value);
script: [ :script |
script add: ((s jQuery id: 'form')
append: [ :h | h hiddenInput
callback: [ :v | ... ] ]) ]) ]

Cheers,
Lukas

--
Lukas Renggli
http://www.lukas-renggli.ch
_______________________________________________
seaside mailing list
[hidden email]

http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside