Hi all,<div><br></div><div>I managed to get a Ajax file uploade using XMLHttpRequests and iFrame callback working in seaside using the <a href="http://valums.com/ajax-upload/">http://valums.com/ajax-upload/</a> library.</div>
<div><br></div><div>As of now, I managed to get it working on Firefox 3.6, but IE and Chrome are still a bit wierd (the file gets uploaded, but the successfull json response is not handled correctly.</div><div><br></div><div>
Screenshot before uploading: <a href="http://ScrnSht.com/ywmtod">http://ScrnSht.com/ywmtod</a> </div><div>Screenshot after uploading 2 files: <a href="http://ScrnSht.com/lexnyu">http://ScrnSht.com/lexnyu</a>.</div><div><br>
</div><div>API example:</div><div>renderDemoOn: html</div><div><div> (html div)</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>script: ((html jQuery this fileUploader)</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>callback: [:aFile | self files add: aFile. JQWidgetBox.JQFileUploaderResponse success];</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>allowedExtensions: #(#jpg #jpeg #png #gif);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>sizeLimit: 102400000;</div><div>
<span class="Apple-tab-span" style="white-space:pre"> </span>onSubmit: (html jQuery ajax script: [:s | s << (s jQuery id: #status) append: [:h | h text: 'Submitting imaged'. h break]]);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>onComplete: (html jQuery ajax script: [:s |</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>s << (s jQuery id: #status) append: [:h | h text: 'Image saved'. h break].</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>s << (s jQuery id: #images) html: [:h | self files do: [:file | self renderFile: file on: h]]]);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>parameters: Seaside.GRSmallDictionary new);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>with: </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>[html</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>html: '<noscript><p>Oops, I need javascript to work.</p></noscript>'].</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html div id: #status.</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>html div id: #images</div></div><div><br></div><div><div>renderFile: file on: html</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>html paragraph: [ html image width: 100; height: 100; document: file rawContents mimeType: file contentType greaseString]</div>
</div><div><br></div><div>To get this working I had to change the requestFieldsFor: aNativeRequest method in the SeasideMarshaler for it to handle the XHR upload correctly. This breaks the rest of my applications, when using JQuery ajax post callbacks.</div>
<div><div><div><br></div><div>requestFieldsFor: aNativeRequest</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>| fields |</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>fields := Seaside.WARequestFields new.</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>(aNativeRequest isMultipart or: [aNativeRequest isBinary])</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>ifTrue: [ self postEncodedDataFrom: aNativeRequest keysAndValuesDo: [:key :value | fields at: key add: value ] ]</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>ifFalse: [ self urlEncodedDataFrom: aNativeRequest contents keysAndValuesDo: [:key :value | fields at: key add: value ] ].</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>^fields</div>
</div></div><div><br></div><div>I feel like a bull in a china shop when making these changes, but worked for me for Firefox. Chrome and IE use multipart uploads (WHY CAN'T ALL BROWSERS HANDLE THIS STUFF THE SAME!!). </div>
<div><br></div><div>Issues:</div><div>Upload response not handled correctly in Chrome and IE.</div><div><br></div><div>Would anybody be interested helping me with getting this to work on all modern browsers?</div><div><br>
</div><div>I plan to put this in the JQuery Widgetbox package on Pharo (as well as my other JQWidgetBOx plugins like JQGrid with editing functionality, JSTree and JQAddress for history support in ajax applications (screenshot at:<a href="http://ScrnSht.com/afrqgq">http://ScrnSht.com/afrqgq</a>. This is a dutch dating website I am creating in seaside :D. Don't mind the content, look at the goodies :) ) )</div>
<div><br></div><div>Also, I would like to learn more on how to share my VW JQuery plugins to Pharo. I anyone willing to help me with porting those? I can setup a public VW repository holding those plugins or put it in the cincom public repos).</div>
<div><br></div><div>The JQFileUploaded is available in the Cincom Public Repository:</div><div><br></div><div>Packages required: </div><div><br></div><div>JQWidgetBox-Namespace</div><div>JQWidgetBox-FileUploader-Core</div>
<div>JQWidgetBox-FileUploader-Dev</div><div><br></div><div>Feel free to contact me anytime.</div><div><br></div><div>Kind regards,</div><div><br></div><div>Bart Veenstra</div><div><br></div><div><br></div><div><br></div><div>
<br></div>