Ajax File Upload

Is there a way to use Seaside jQuery Ajax support to upload a file while staying on the page? I tried using jQuery callback with value but I just got the file name:

... onChange: (html jQuery ajax

    callback: [ :file | file inspect ]

    value: (html jQuery id: 'file') value)

Is there something else I could use? Could I for instance have the form submit but have it not go to a different page?

Cheers,

Jeff

Hi Jeff,

Uploading files with ajax using Seaside requires the same solution as in any other framework. For example: http://blog.teamtreehouse.com/uploading-files-ajax or https://coderwall.com/p/p-n7eq/file-uploads-with-jquery-html5-and-formdata

The solution you choose also depends on what browsers you want to support.

We are using this jquery plugin: https://blueimp.github.io/jQuery-File-Upload/

I’m currently integrating the formdata solution into Seaside 3.2. it’s not ready for prime-time yet but here is how you can do the same in Seaside 3.0 and 3.1.

html fileUpload

id: id.

html submitButton

onClick: (self scriptToPerformAjaxFileUploadOf: id on: html);

with: 'Upload!' ]

scriptToPerformAjaxFileUploadOf: fileUploadId on: html

"Create a FormData object containing the file"

^(JSStream on: '

var formdata = new FormData();

formdata.append("file-0", $("#', fileUploadId,'")[0].files[0])'),

"Send this FormData object to the back-end to be processed"

(html jQuery ajax 

optionAt: 'data' put: (html javascript alias: 'formdata');

url: ((html jQuery ajax callback:[ fileInput := self requestContext request postFields at:'file-0' ]) fullUrl);

optionAt: 'type' put:'POST';

optionAt: 'cache' put: false;

optionAt: 'contentType' put:false;

optionAt: 'processData' put:false;

onSuccess: (html jQuery ajax script:[:s | s alert: 'File with name ',fileInput fileName, 'successfully uploaded!' ])

yourself)

Let me know if this puts you on your way or if you need a bit more info.

As I said, this is going to be integrated in Seaside 3.2 _and_ you need a browser with FormData support (see http://caniuse.com/#search=formdata)

cheers

Johan

On 17 Jun 2015, at 01:09, J.F. Rick <[hidden email]> wrote:

I've looked a bit more into it and it seems that I'll have to do a form submit and use jquery / ajax to stop the normal submit action. That seems fine but I don't know how to hook that into seaside.

Cheers,

Jeff

On Tue, Jun 16, 2015 at 6:44 PM J.F. Rick <[hidden email]> wrote:

Is there a way to use Seaside jQuery Ajax support to upload a file while staying on the page? I tried using jQuery callback with value but I just got the file name:

... onChange: (html jQuery ajax

    callback: [ :file | file inspect ]

    value: (html jQuery id: 'file') value)

Is there something else I could use? Could I for instance have the form submit but have it not go to a different page?

Cheers,

Jeff

_______________________________________________
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