Jquery, prototype, mootools and rails 3 fancy uploader

Question

I'm using Rails 3.2.6 and trying to integrate Rails S3 Fancy uploader and I think it's probably a misunderstanding with how I'm using prototype, jquery, and mootools at the same time, or just migrating it to a newer version of rails.

I've got jQuery in noconflict mode right after including the asset pipeline (prototype.js & mootools.js libraries are in the /assets/javascript folder, as well as all the source files for 'fancyuploader' similar to how the /public folder is oriented in the github repo):

<%= javascript_include_tag "application" %>
<script type="text/JavaScript>
jQuery.noConflict();
</script>

However, I am still getting a lot of undefined errors, and I think it has to do with the order the assets are being loaded onto the page.

Uncaught TypeError: Object [object Window] has no method 'addEvent' script.js:10
Uncaught TypeError: Object [object Window] has no method 'addEvent' script.js:10
Uncaught ReferenceError: Class is not defined FancyUpload2.js:15
Uncaught ReferenceError: Class is not defined FancyUpload3.Attach.js:15
Uncaught ReferenceError: Class is not defined FancyUpload3.S3Uploader.js:27
Uncaught ReferenceError: Fx is not defined Fx.ProgressBar.js:13
Uncaught ReferenceError: Swiff is not defined Swiff.Uploader.js:14
Uncaught ReferenceError: Class is not defined Uploader.js:13
Uncaught TypeError: Cannot read property '0' of undefined prototype.js:6719

It looks like mootools and prototype aren't available to the scripts required the create the 'FancyUploader'

---

The project runs just fine in Rails 3.0.7, with the assets in a public folder and haml template engine in the source (I'm using erb, but this is a JS problem I think), however, I also noticed prototype doesn't seem to be referenced in the authors includes??

= javascript_include_tag( 'mootools.js', 
                              'fancyupload/source/Fx.ProgressBar',
                              'fancyupload/source/Swiff.Uploader', 
                              'fancyupload/source/FancyUpload3.Attach', 
                              'fancyupload/source/FancyUpload3.S3Uploader' ) 

Answer 1

well. you have a problem here, your stack is not compatible.

• jquery + prototype = ok
• mootools + jquery = ok
• mootools + prototype = fail

The reason is simple - both are prototypical and whereas you can namespace the $ and make sure that plays nice, you cannot namespace the Types protos and neither MooTools nor Prototypejs try to hide / namespace their global object exports on top of that, so there will be inevitable clashes.

Time to rethink what you use, having 2 frameworks is frowned upon, having 3 is overkill.

Answer 2

Why you don't try with http://mootools.net/forge/p/mooupload

Support the new HTML5 chunk uploading, flash upload and normal html4 upload. It has a nice progress bar and allow you to upload several files at same time (Plus multiple file selection with HTML5 and Flash upload method).

Mooupload uses "document.id" and not $, so It should work together with JQuery.