Tag Archives: jquery

uploadfive (uploadify) vs fine Fine Uploader

If you are looking for an AJAX file uploader, where you select a file and the file is immediately uploaded (ajax) and an action (such as displaying the uploaded image, for example) is called on successful upload, then you may have found via your google searches these 2 scripts:

  • Fine Uploader (the winner: average documentation (the demos are clear enough but no “in depth” centralized reference with all the options), available working demos, source code available to download)
  • uploadify (looked promising by first look, good documentation, working demos not available (only one poor demo and a video, but not a page where you can upload a file and see the results), uploadfive source code available only after buying the license)

In this comparison you will find some more details based on my testing/experience (please note that my tests are based on my pragmatical usage at work, where I needed to provide a fast working solution for a project with a crazy deadline, so I had no time to search in the forums and try all the possible solutions but needed something to work fast out of the box. If you have much more time to invest than me, you may get different impressions, feel free to share in the comments):

uploadify (flash)

I used the free flash uploader for a backend I developed for a customer, and I implememented it without the “auto” option. The user must select a file and click a button to initiate the upload. If this is your scenario, this may be good enough for you.

uploadfive (html5)

uploadfive is the commercial version of uploadify, and it’s html5. You have to implement a fallback version for non html5 support, for the fallback you need features testing provided e.g. by Modernizr. The fallback will be uploadify. So you need to upload 2 scripts if you want a full working solution + you need to implement your own logic for the fallback.

If you don’t want the flash uploader for obvious reasons (no flash support) then you may have a look at this. The downside is that you can’t download a trial version, you must buy a license to try it and this is a bit annoying. Luckily you can buy a license for personal usage for only 5 USD. I tested it and could make it work with Firefox and Chrome.

The “auto” function (upload a file directly after selecting it) doesn’t work for Internet Explorer (I tried IE9, IE8 and IE7, it fails with all these versions).

I searched the documentation and the forums, found some solutions, tried to implement them without success. Thus I got annoyed and tried Fine Uploader.

Fine Uploader (html5)

On my opinion this is the winner. I could test the jQuery wrapper demos directly on their website, also the “auto” option I needed for my scenario (see Display Image Thumbnails demo). It worked on all browsers I needed (Firefox, Chrome, IE9, IE8, IE7). I could download the GPL 3 open source code and immediately test it in my environment. If you don’t need the spinner and the results like in my case, just hide them via CSS:

.qq-drop-processing, .qq-upload-list { display: none; }

The button can be styled via templates. See Bootstrapped Minimal Demo.

The commercial license costs 49 USD (update: 79 USD, update 2015.01.27: 99 USD) but I think it’s really worth it. I could make it work “out of the box” without the hassle to search forums for hacks or solutions, like for uploadify. The support is quite fast. If you work for an agency, 1 hour of your time costs (for the company) for sure more than 99 USD. Convince your boss or project manager to buy it!

Conclusion

Get Fine Uploader. If you know a better ajax file uploader, not in flash, working with all browsers, feel free to share in the comments. Hope this helps.

Solution for jquery unobtrusive ajax live error

So you get an error from jquery.unobtrusive-ajax.min.js:

TypeError: $(…).live is not a function?

If you, like me, just upgraded in Visual Studio all NuGet packages included in your MVC project, you may probably encounter this error because the live() function is not available anymore in jquery 1.9, but still being called by .

The problem is that jquery.unobtrusive-ajax.min.js (jQuery Unobtrusive Ajax 2.0.20710.0 at the moment of writing) is calling the live() function in several places.

Here the solution: replace all occurrences of “live(” with “on(“, save and that’s it (source: stackoverflow)

UPDATE

jQuery Unobtrusive Ajax was upgraded and you can use the newest version with the latest jquery 1.x version.