Uploading an image using AJAX and iframes

Hello List,

I am currently implementing an ImageChooser Component, where I like users to upload an image by submtiting the form containing the fileUpload using an iframe like this:

html form id: (self formId);  attributeAt: #target put: (self frameName); multipart; method: #post; with: [

html fileUpload

id: self uploadInputId;

accept: 'png jpg jpeg gif';

on: #image of: self.

html div with: [

html anchor

onClick: (html javascript factory form id: self formId; submit);

with: 'Upload Image'.

].

].

html iframe name: self frameName; style: 'display: none; widht: 0; height: 0; border: 0;'.

This works – but it loads the entire page into the iframe, again. I would rather just load an html stub containing a javascript which indicates if the upload was successful or not and executes in the context of the original html. I tried to return a response during the setting of my component's image instance-variable but this does not work.

Has anybody an Idea?

RD

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

> This works – but it loads the entire page into the iframe, again. I would
> rather just load an html stub containing a javascript which indicates if the
> upload was successful or not and executes in the context of the original
> html. I tried to return a response during the setting of my component's
> image instance-variable but this does not work.
> Has anybody an Idea?

You need to start a new render loop (to avoid that the parent page is
displayed within the frame) and display some component. Try to add the
following code at the end of the method #image:

  ...
  WARenderLoop new
      show: (WAComponent new
           addMessage: 'File successfully uploaded';
           yourself)
      withToolFrame: false

Replace the expression within brackets with your own component that
displays the confirmation.

Cheers,
Lukas

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

Works great, thank you!
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside