<div dir="ltr">Works. AWESOME! Thanks.<br><br><div>Jeff</div></div><br><div class="gmail_quote"><div dir="ltr">On Wed, Jun 17, 2015 at 7:59 AM Johan Brichau <<a href="mailto:johan@inceptive.be">johan@inceptive.be</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div style="word-wrap:break-word">Hi Jeff,<div><br></div><div>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" target="_blank">http://blog.teamtreehouse.com/uploading-files-ajax</a> or <a href="https://coderwall.com/p/p-n7eq/file-uploads-with-jquery-html5-and-formdata" target="_blank">https://coderwall.com/p/p-n7eq/file-uploads-with-jquery-html5-and-formdata</a></div><div><br></div><div>The solution you choose also depends on what browsers you want to support.</div><div>We are using this jquery plugin: <a href="https://blueimp.github.io/jQuery-File-Upload/" target="_blank">https://blueimp.github.io/jQuery-File-Upload/</a></div><div><br></div><div>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><br></div><div><br></div><div><div>html fileUpload</div><div><span style="white-space:pre-wrap"> </span>id: id.</div><div>html submitButton</div><div><span style="white-space:pre-wrap"> </span>onClick: (self scriptToPerformAjaxFileUploadOf: id on: html);</div><div><span style="white-space:pre-wrap"> </span>with: 'Upload!' ]</div></div><div><br></div><div><br></div><div><div>scriptToPerformAjaxFileUploadOf: fileUploadId on: html</div><div><br></div><div><span style="white-space:pre-wrap"> </span>"Create a FormData object containing the file"</div><div><span style="white-space:pre-wrap"> </span>^(JSStream on: '</div><div><span style="white-space:pre-wrap"> </span>var formdata = new FormData();</div><div><span style="white-space:pre-wrap"> </span>formdata.append("file-0", $("#', fileUploadId,'")[0].files[0])'),</div><div><span style="white-space:pre-wrap"> </span></div><div><span style="white-space:pre-wrap"> </span>"Send this FormData object to the back-end to be processed"</div><div><span style="white-space:pre-wrap"> </span>(html jQuery ajax </div><div><span style="white-space:pre-wrap"> </span>optionAt: 'data' put: (html javascript alias: 'formdata');</div><div><span style="white-space:pre-wrap"> </span>url: ((html jQuery ajax callback:[ fileInput := self requestContext request postFields at:'file-0' ]) fullUrl);</div><div><span style="white-space:pre-wrap"> </span>optionAt: 'type' put:'POST';</div><div><span style="white-space:pre-wrap"> </span>optionAt: 'cache' put: false;</div><div><span style="white-space:pre-wrap"> </span>optionAt: 'contentType' put:false;</div><div><span style="white-space:pre-wrap"> </span>optionAt: 'processData' put:false;</div><div><span style="white-space:pre-wrap"> </span>onSuccess: (html jQuery ajax script:[:s | s alert: 'File with name ',fileInput fileName, 'successfully uploaded!' ])</div><div><span style="white-space:pre-wrap"> </span>yourself)</div></div><div><br></div><div><br></div><div>Let me know if this puts you on your way or if you need a bit more info.</div><div>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" target="_blank">http://caniuse.com/#search=formdata</a>)</div><div><br></div><div>cheers</div><div>Johan</div><div><div><br><div><blockquote type="cite"></blockquote></div></div></div></div><div style="word-wrap:break-word"><div><div><div><blockquote type="cite"><div>On 17 Jun 2015, at 01:09, J.F. Rick <<a href="mailto:self@je77.com" target="_blank">self@je77.com</a>> wrote:</div><br></blockquote></div></div></div></div><div style="word-wrap:break-word"><div><div><div><blockquote type="cite"><div><div dir="ltr">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><div><br></div><div>Cheers,</div><div><br></div><div>Jeff</div></div><br><div class="gmail_quote"><div dir="ltr">On Tue, Jun 16, 2015 at 6:44 PM J.F. Rick <<a href="mailto:self@je77.com" target="_blank">self@je77.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">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><br></div><div>... onChange: (html jQuery ajax</div><div> callback: [ :file | file inspect ]</div><div> value: (html jQuery id: 'file') value)</div><div><br></div><div>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><br></div><div>Cheers,</div><div><br></div><div>Jeff</div></div></blockquote></div></div></blockquote></div></div></div></div><div style="word-wrap:break-word"><div><div><div><blockquote type="cite"><div>
_______________________________________________<br>seaside mailing list<br><a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br><a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br></div></blockquote></div><br></div></div></div>_______________________________________________<br>
seaside mailing list<br>
<a href="mailto:seaside@lists.squeakfoundation.org" target="_blank">seaside@lists.squeakfoundation.org</a><br>
<a href="http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside" rel="noreferrer" target="_blank">http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside</a><br>
</blockquote></div>