CODEWITHSUNDEEP
knockout.jsuploadify
Jack Woodward
Jack Woodward

Reputation: 475

Uploadify says it can't find the placeholder element when I pass a DOM object directly to it but Uploadifive works, why?

I was trying to you use uploadify/uploadifive with knockout and kept getting an error about not being able to find the place holder element. The error only occured when running IE which was using the uploadify(flash) version. Other browsers were fine because they were using uploadifive(html5). Why isn't it working in IE?

HTML

<input type="file"  data-bind="imageUpload: images"  />

Custom Binding

        ko.bindingHandlers.imageUpload = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var uploadCallback = function (file, data, response) {
                valueAccessor().collection().add(JSON.parse(data));
            };
            window.setTimeout(function () {
              $(element).uploadifive({
                  'method': 'post',
                  'fileObjName': 'FileData',
                  'uploadScript': 'Image/Upload',
                  'onUploadComplete': uploadCallback,
                  'onFallback': function () {
                      $(element).uploadify({
                          'method': 'post',
                          'fileObjName': 'FileData',
                          'swf': '/Scripts/Uploadify/uploadify.swf',
                          'uploader': 'Image/Upload',
                          'onUploadSuccess': uploadCallback
                      });
                  }});
             }, 0);
           }
         }

Upvotes: 2

Views: 1020

Answers (1)

Jack Woodward
Jack Woodward

Reputation: 475

The problem was a combination of not putting an id on the input element and needing to wrap the uploadify creation code in a timeout function. The code in the question reflects has the timeout wrapping the call to $.uploadify. This is because uploadify uses swfupload internally which will try to query for the input element by id. If you don't want to put an id attribute on the input element you could also add a little code to the uploadify script which will generate an id.

Here is what I added

        //Add id to DOM object if it doesn't exist. 
        if (!$this.attr('id')) {
            $this.attr('id', 'uploadify' + uploadControlIdCounter);
            uploadControlIdCounter += 1;
        }

The same thing with a little more context surrounding it.

    /*
   Uploadify v3.1.1
   Copyright (c) 2012 Reactive Apps, Ronnie Garcia
   Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 
   */

   (function($) {
   var uploadControlIdCounter = 0;
   // These methods can be called by adding them as the first argument in the uploadify plugin call
var methods = {

    init : function(options, swfUploadOptions) {

        return this.each(function() {

            // Create a reference to the jQuery DOM object
            var $this = $(this);

            //Add id to DOM object if it doesn't exist. 
            if (!$this.attr('id')) {
                $this.attr('id', 'uploadify' + uploadControlIdCounter);
                uploadControlIdCounter += 1;
            }

Upvotes: 1

Related Questions