[Seaside] Ajax File Upload

[Johan Brichau]

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 <http://blog.teamtreehouse.com/uploading-files-ajax> or https://coderwall.com/p/p-n7eq/file-uploads-with-jquery-html5-and-formdata <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/ <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 <http://caniuse.com/#search=formdata>)

cheers
Johan

> On 17 Jun 2015, at 01:09, J.F. Rick <self at je77.com> 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 <self at je77.com <mailto:self at je77.com>> 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
> seaside at lists.squeakfoundation.org
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20150617/6d943c18/attachment.htm