Skip to content
Menu
Justin Ball
  • About
  • Privacy Policy
Justin Ball

Uploadify onComplete Wouldn’t Fire Until I Swore – A Lot

Posted on September 3, 2010November 1, 2021

I’ve been trying to get Uploadify to work inside my <a href=”http://github.com/jbasdf/uploader”Uploadify>uploader gem</a>. Things went pretty well until I combined that with the muck-contents gem and tried to do multiple file uploads from within a plugin I’d written for the TinyMCE editor. At that point things got ugly.

If you do much research on Uploadify you’ll find that it’s pretty common to hear someone complain that the OnComplete event does not fire. There’s a number of solutions that people have come up with, but mostly they sound like voodoo – Be sure to only return a ‘1’, make sure to use an id instead of a css class, etc. I tried everything I read about and finally got mad enough to debug the fla file.

If you are that desperate make sure to get FireFlash. It will let you write to the Firebug console from within your swf file. It’s very handy when you need to see what’s going on inside your Actionscript while running inside the browser. I created a debug version of the fla that output the events that the swf file was attempting to fire on the client. If you want to try it out in hopes it will help you debug download a zip file with the swf and fla.

OK so now to the point. What’s going wrong? Why doesn’t ‘onComplete’ fire? The answer is that Uploadify binds events to the DOM item you specify via jQuery(‘#my-upload-container’).uploadify(); These events include ‘uploadifySelect’, ‘uploadifyOpen’, ‘uploadifyProgress’, ‘uploadifyComplete’, etc. What I found is that the swf makes a call that looks like this:


ExternalInterface.call(['jQuery'+p(q('#'+param.uploadifyID)), p(list.join(','))].join('.trigger'));
</pre>

That call does it's job - I can watch it make the ExternalInterface calls using FireFlash. The swf file attempts to trigger the events I listed above that have been bound to the element identified by id="my-upload-container". However, something goes wrong and somehow the 
'my-upload-container' element loses it's bindings and nothing is fired.

I found I can get things to work if I change 'jquery.uploadify.js' to bind the events above to the document instead of to the DOM element and then change the fla to do this:

ExternalInterface.call(['jQuery(document)', p(list.join(','))].join('.trigger'));
</pre>

That means that the events do fire however it's a hack so I kept digging (and swearing) and I bummed some help off Joel.....

It turns out that the problem wasn't Flash. It wasn't uploadify. It wasn't jQuery although all of those components seemed like they might be the source of the problem.  The problem as it turns out was TinyMCE. (As it turns out TinyMCE is the source of a lot of my problems but I still like it).

In our specific case we've built a plugin to TinyMCE that let's you upload files to the server. (You can find it in the muck-contents gem). We use the TinyMCE scripts to build our popups which means using 'tiny_mce/tiny_mce_popup.js'. If you look in that code very deeply you will discover this code around line 320:


  if ((nv = t.editor.translate(h)) && nv != h)
    document.body.innerHTML = nv;
</pre>

Notice that the way the popup handles translations is to replace the entire document with new html. If you use jQuery and your bindings have already been setup you realize this is very bad because everything you've setup using the standard methods just vanished. (This goes for all methods - click, bind, etc. They will all go away).

ie This won't work:

jQuery(document).ready(function(){
   jQuery('#mce_uploader_upload').uploadify(mce_uploader_options);
});
</pre>

The solution is simple and probably obvious to a seasoned TinyMCE dev (which I'm not). Put your code into a different initialization block:

tinyMCEPopup.onInit.add(function(ed) {
   jQuery('#mce_uploader_upload').uploadify(mce_uploader_options);
});
</pre>




As an aside I should mention that if you need help getting uploadify running in your Rails application there's already a couple of great tutorials. One by John Nunemaker and an update to get it working with Rails 3 updated version.

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Around and Back to WordPress
  • Last Lagoon (This Year)
  • Logan Sunset
  • Grami Del
  • FanX (and Lagoon)

Recent Comments

  1. Around and Back to WordPress – Justin Ball on Gatsby 2.0 and Forestry
  2. More Stuff You Shouldn’t Hit on a Bike – Justin Ball on Why Cyclists Shave Their Legs. The Most Disgusting Post I Will Ever Make
  3. First Real Ride on the New Trek Madone 6.9 – Justin Ball on Rode Blacksmith Fork Canyon Tonight
  4. First ride up Black Smith Fork canyon this season – Justin Ball on Why Cyclists Shave Their Legs. The Most Disgusting Post I Will Ever Make
  5. How New Carpet and Rattlesnake turned me into a Consultant or What the Hell Happened? – Justin Ball on Why Cyclists Shave Their Legs. The Most Disgusting Post I Will Ever Make

Archives

  • November 2021
  • October 2021
  • September 2021
  • January 2020
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • February 2017
  • November 2016
  • September 2016
  • August 2016
  • May 2016
  • March 2016
  • February 2016
  • November 2015
  • September 2015
  • June 2015
  • May 2015
  • February 2015
  • January 2015
  • October 2014
  • September 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • October 2013
  • September 2013
  • August 2013
  • June 2013
  • May 2013
  • April 2013
  • February 2013
  • January 2013
  • December 2012
  • October 2012
  • September 2012
  • June 2012
  • January 2012
  • December 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • September 2008
  • August 2008
  • July 2008
  • June 2008
  • May 2008
  • April 2008
  • March 2008
  • February 2008
  • January 2008
  • December 2007
  • November 2007
  • October 2007
  • September 2007
  • August 2007
  • July 2007
  • June 2007
  • May 2007
  • March 2007
  • February 2007
  • January 2007
  • December 2006
  • November 2006
  • October 2006
  • September 2006
  • August 2006
  • July 2006
  • June 2006
  • May 2006
  • April 2006
  • March 2006
  • December 2005
  • November 2005
  • October 2005
  • September 2005

Categories

  • 2.3.2
  • 3g
  • 3tera
  • 420
  • 51weeks
  • 64bit
  • accessibility
  • ActionView::MissingTemplate
  • activemerchant
  • ActiveRecord
  • activesalesforce
  • acts as taggable
  • acts_as_facebook_user
  • acts_as_nested_set
  • acts_as_state_machine
  • advertising
  • Affiliate Marketing
  • air quality
  • ajax
  • Alyssa
  • ama
  • amazon
  • amazon s3
  • amazon wishlist
  • amazon.com
  • ancestry
  • animal cookies
  • antshares
  • apache
  • API
  • apis
  • apollo
  • apollo client
  • apple
  • Apple Store
  • Apple Time Capsule
  • application
  • applications
  • Art
  • ASP.Net
  • assert_sent_email
  • asyncronous processing
  • Atomic Jolt
  • Aubrey
  • Authentication
  • authorize.net
  • Autumn
  • babelphish
  • back problems
  • backbone.js
  • backup software
  • backups
  • bacon
  • Battlestar Galactica
  • big companies
  • birthday.
  • bitcoin
  • black cherry vanilla coke
  • Black Smith Fork Canyon
  • blockchain
  • blog
  • Blogging
  • bluehost
  • books
  • BoomStartup
  • bread
  • buddypress
  • bug
  • bugs
  • business
  • business. mother's animal cookies
  • cache county
  • cache valley
  • California
  • Cancun
  • canvas
  • capistrano
  • Catholic Church
  • cereal
  • chauvet obey 40
  • checkbox list
  • checkboxes
  • chess
  • Chicago
  • china
  • chocolate
  • Christmas
  • Chrome
  • church
  • Cinderella
  • Cisco
  • cloud computing
  • cms
  • code generation
  • code sprint
  • coke
  • Comcast
  • commerce
  • Common Lisp
  • communities
  • Community
  • complex
  • Computers
  • conference
  • conference software
  • configuration
  • consulting
  • cookies
  • cooking
  • COSL
  • cosmos
  • count
  • courts
  • cows
  • create
  • creative commons
  • cryptocurrencies
  • cryptography
  • css animations
  • cucumber
  • currency
  • Cycling
  • database
  • dataloader
  • date
  • death
  • death ray
  • debugging
  • decentralized applications
  • dell dimension 8400
  • democray
  • deployment
  • developing
  • development
  • Devin
  • diet
  • digg
  • Digital Ocean
  • digital-photography
  • disease
  • disguise
  • disgusting
  • disney
  • disneyland
  • DiSo
  • disposable
  • DMX
  • Docker
  • domain name
  • domains
  • doom
  • dr strangelove
  • driving
  • Dryers
  • DVI
  • ec2
  • economics
  • economy
  • ecto
  • edge rails
  • Education
  • EFF
  • Egypt
  • ElasticSearch
  • elastra
  • elections
  • elixir
  • email
  • Ember
  • Ember.js
  • encoding
  • energy
  • engine yard
  • engines testing
  • engineyard
  • enterprise
  • epp
  • error
  • errors
  • ethereum
  • Event Machine
  • expercom
  • facebook
  • failure
  • Family
  • family history
  • family reunion
  • family search
  • family trip
  • Family Vacation
  • familysearch
  • familysearch.org
  • farmers market
  • fashion
  • fences
  • field trip
  • file uploads
  • Firebase
  • fireeagle
  • fix
  • flat tax
  • flowers
  • folksonomy
  • food
  • France iPad Internet access
  • free book
  • freedom
  • friendfeed
  • friends
  • fuel
  • Fun Stuff
  • funeral
  • Funny
  • funny kids
  • gadgets
  • galleries
  • gamenight
  • garden
  • gardens
  • garter snake
  • gatsby
  • gatsbyjs
  • gearsynper
  • geek
  • gelatin
  • gem
  • gems
  • gems ruby on rails
  • genealogy
  • genius
  • geocaching
  • geotagging
  • girl's camp
  • gistr
  • git
  • github
  • global
  • gmail
  • godaddy
  • Goliath
  • Google
  • google bomb
  • google docs
  • google hacks
  • Gorden B Hinckley
  • government
  • gps
  • grand master
  • grand-teton-national-park
  • graph ql
  • graphcool
  • graphql
  • graphqlsummit
  • great firewall
  • grocery
  • gross
  • group work
  • HABTM
  • Hacks
  • halloween
  • happy
  • has and belongs to many
  • has_many
  • hashgraph
  • Hawaii
  • health
  • health insurance
  • heirachy
  • Heirarchies
  • helps
  • Heroku
  • Holiday
  • home building
  • home improvement
  • home plans
  • homebrew
  • homework
  • hosting
  • house plans
  • House Stuff
  • housing
  • human rights
  • hyperledger
  • i18n
  • ice cream
  • icls2008
  • idaho
  • ideas
  • identity
  • identity_theft
  • iiw2006b
  • image
  • image processing
  • inbox
  • induglences
  • insane
  • inspiration
  • install
  • Instructure
  • Interesting
  • internet
  • Internet Explorer
  • InvalidAuthenticityToken
  • iPhone
  • jackson-hole
  • jamis buck
  • Javascript
  • JavaScript (Programming Language)
  • Javscript
  • Jenna
  • jeweler
  • jobs
  • joyent
  • jQuery
  • jungle disk
  • jurlp
  • justin ball
  • kids
  • knowledge workers
  • lambad
  • laptop case
  • launchup.org
  • lds
  • LDS church
  • learning
  • legal
  • Lego
  • legos
  • leopard
  • lesson
  • Levi Leipheimer
  • Liahona
  • library
  • life
  • lifestream
  • Links
  • litecoin
  • LMS
  • loans
  • localization
  • logan
  • Logan Canyon
  • logistics
  • logitech
  • LTI
  • lucene
  • lucene.net
  • Lucifer
  • luvfoo
  • mac
  • Mac OSX 10.6
  • Mac Ports
  • macbook
  • macbook pro
  • Maker
  • Maker Faire
  • manage
  • marginal changes
  • marion
  • marriage
  • Matt Mullenweg
  • me
  • medicine
  • Meetings
  • merb
  • Mexico
  • micro-blogging
  • microcontent
  • microformats
  • Microsoft
  • Middle East
  • migrations
  • mom
  • money
  • Monitor
  • morph
  • morph exchange
  • morphexchange
  • mortgage
  • mosso
  • motorcycle
  • mountain biking
  • Mountain West Javascript
  • Mountain West Ruby
  • mountain west ruby conference
  • mountainwestrubyconf
  • mozy
  • MRI
  • mtnwestrubyconf
  • muck
  • multi-user
  • music
  • mwjs
  • mwrc
  • mysql
  • mysql gem
  • MYTecC
  • Neat Stuff
  • neighbors
  • newgem
  • No Programming
  • node.js
  • nuclear weapons
  • nutcracker
  • Oahu
  • Oauth
  • oauth-plugin
  • Obama
  • Obie Fernandez
  • OER
  • OER Glue
  • olympic torch
  • olympics
  • omniauth
  • Open Assessments
  • open source
  • OpenContent
  • opened2007
  • OpenID
  • opensocial
  • optimism
  • ordered tree
  • oreos
  • osx
  • outdoors
  • outsourcing
  • ozmozr
  • pain
  • panasonic plasma
  • Paris
  • password recovery
  • payday lenders
  • paypal
  • pety
  • PGP
  • Phil Windley
  • photography
  • photoJAR
  • photos
  • php
  • pickle soup
  • pickup
  • piclens
  • Pictures
  • plasma tv
  • Playa Del Carmen
  • plugin
  • plugins
  • poinsettia
  • Political
  • politics
  • portablecontacts
  • PostGreSQL
  • PostGresSQL
  • poverty
  • privacy
  • problems
  • product: web
  • professional
  • Programming
  • Projects
  • prophet
  • protect_from_forgery
  • protests
  • prototype
  • psych
  • psychology
  • queue
  • rails
  • rails 2.0
  • rails conference
  • Rails I18n Textmate bundle
  • RailsConf
  • RailsConf07
  • rake
  • rant
  • react
  • react router
  • React.js
  • Reactive
  • reactjs
  • reactrouter
  • realestate
  • recipe
  • recommender
  • records
  • red green
  • redirect_to
  • regular expressions
  • relay
  • religion
  • render
  • replace
  • reputation
  • require.js
  • research
  • REST
  • restaurant
  • rFacebook
  • ridiculous
  • rightscale
  • ringside networks
  • river
  • river trail
  • robots
  • romantic
  • roomba
  • rpsec
  • rspec
  • rspec bundle
  • rss
  • ruby
  • Ruby On Rails
  • Ruby On Railst
  • ruby_on_rails
  • rvm
  • s3
  • sad
  • Salesforce
  • samsung ml1740
  • sarah sample
  • scalability
  • School
  • Science
  • scorm
  • scream
  • script.aculo.us
  • SDK
  • search
  • senate
  • SEO
  • serverless
  • servers
  • sessions
  • shopping
  • shortcodes
  • shoulda
  • sign language
  • simple
  • small business
  • snakes
  • Snelgrove
  • social graph
  • social media
  • social network dilution
  • social networking
  • social search
  • Social Software
  • socialsoftware
  • society2.0
  • soda
  • software
  • software design
  • Software Development
  • solidity
  • solo
  • soviet union
  • sovrin
  • sql
  • sql server
  • SQL Server 2005 Express
  • sql server 2008 express
  • starling
  • start ups
  • startups
  • starvation
  • stm bags
  • stm medium alley
  • storage
  • subversion
  • target
  • tax
  • Teachers Without Borders
  • tech
  • teeth whitening
  • template not foudn
  • templates
  • test-spec
  • testing
  • tests
  • textmate
  • thanksgiving point
  • The Japanese Mafia is controlling the weather
  • The Kids
  • The Plan Collection
  • The Web
  • theming skin
  • theplancollection
  • theplancollection.com
  • time
  • timr
  • tips
  • to_json
  • tools
  • Tour de France
  • transfer
  • translations
  • Travel
  • Travel, Disneyland, LA
  • trees
  • trip
  • truffles
  • tutorial
  • tutorials
  • tv
  • twitter
  • Uncategorized
  • uninsured
  • universe
  • unpack
  • unread
  • upgrades
  • uploader
  • uploads
  • user discovery
  • user interface
  • userfly
  • utah
  • utah government
  • utah senate
  • utf8
  • Vacation
  • values
  • vinegar
  • virtual hosts
  • walmart
  • warranty
  • Waste of Time
  • weather
  • Web
  • web design
  • web development
  • Web RTC
  • Web2.0
  • web2con2006
  • webservices
  • weddings
  • Wesley Connell
  • whereigo
  • wife
  • windows
  • Wired
  • wishlist
  • with
  • word press
  • Wordpress
  • work
  • workling
  • wpmu
  • xml
  • yeast
  • yellowstone
  • zentest
©2023 Justin Ball | Powered by SuperbThemes & WordPress