<html><head><meta http-equiv="Content-Type" content="text/html charset=utf-8"></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;" class="">Hi Jeff,<div class=""><br class=""></div><div class="">Uploading files with ajax using Seaside requires the same solution as in any other framework. For example: <a href="http://blog.teamtreehouse.com/uploading-files-ajax" class="">http://blog.teamtreehouse.com/uploading-files-ajax</a> or <a href="https://coderwall.com/p/p-n7eq/file-uploads-with-jquery-html5-and-formdata" class="">https://coderwall.com/p/p-n7eq/file-uploads-with-jquery-html5-and-formdata</a></div><div class=""><br class=""></div><div class="">The solution you choose also depends on what browsers you want to support.</div><div class="">We are using this jquery plugin: <a href="https://blueimp.github.io/jQuery-File-Upload/" class="">https://blueimp.github.io/jQuery-File-Upload/</a></div><div class=""><br class=""></div><div class="">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.</div><div class=""><br class=""></div><div class=""><br class=""></div><div class=""><div class="">html fileUpload</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>id: id.</div><div class="">html submitButton</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>onClick: (self scriptToPerformAjaxFileUploadOf: id on: html);</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>with: 'Upload!' ]</div></div><div class=""><br class=""></div><div class=""><br class=""></div><div class=""><div class="">scriptToPerformAjaxFileUploadOf: fileUploadId on: html</div><div class=""><br class=""></div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>"Create a FormData object containing the file"</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>^(JSStream on: '</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>var formdata = new FormData();</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>formdata.append("file-0", $("#', fileUploadId,'")[0].files[0])'),</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span></div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>"Send this FormData object to the back-end to be processed"</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>(html jQuery ajax </div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>optionAt: 'data' put: (html javascript alias: 'formdata');</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>url: ((html jQuery ajax callback:[ fileInput := self requestContext request postFields at:'file-0' ]) fullUrl);</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>optionAt: 'type' put:'POST';</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>optionAt: 'cache' put: false;</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>optionAt: 'contentType' put:false;</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>optionAt: 'processData' put:false;</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>onSuccess: (html jQuery ajax script:[:s | s alert: 'File with name ',fileInput fileName, 'successfully uploaded!' ])</div><div class=""><span class="Apple-tab-span" style="white-space:pre"> </span>yourself)</div></div><div class=""><br class=""></div><div class=""><br class=""></div><div class="">Let me know if this puts you on your way or if you need a bit more info.</div><div class="">As I said, this is going to be integrated in Seaside 3.2 _and_ you need a browser with FormData support (see <a href="http://caniuse.com/#search=formdata" class="">http://caniuse.com/#search=formdata</a>)</div><div class=""><br class=""></div><div class="">cheers</div><div class="">Johan</div><div class=""><div class=""><br class=""><div><blockquote type="cite" class=""><div class="">On 17 Jun 2015, at 01:09, J.F. Rick <<a href="mailto:self@je77.com" class="">self@je77.com</a>> wrote:</div><br class="Apple-interchange-newline"><div class=""><div dir="ltr" class="">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.<br class=""><div class=""><br class=""></div><div class="">Cheers,</div><div class=""><br class=""></div><div class="">Jeff</div></div><br class=""><div class="gmail_quote"><div dir="ltr" class="">On Tue, Jun 16, 2015 at 6:44 PM J.F. Rick <<a href="mailto:self@je77.com" class="">self@je77.com</a>> wrote:<br class=""></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr" class="">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:<div class=""><br class=""></div><div class="">... onChange: (html jQuery ajax</div><div class=""> callback: [ :file | file inspect ]</div><div class=""> value: (html jQuery id: 'file') value)</div><div class=""><br class=""></div><div class="">Is there something else I could use? Could I for instance have the form submit but have it not go to a different page?</div><div class=""><br class=""></div><div class="">Cheers,</div><div class=""><br class=""></div><div class="">Jeff</div></div></blockquote></div>
_______________________________________________<br class="">seaside mailing list<br class=""><a href="mailto:seaside@lists.squeakfoundation.org" class="">seaside@lists.squeakfoundation.org</a><br class="">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside<br class=""></div></blockquote></div><br class=""></div></div></body></html>