Uploadify updateSettings problems

Question

I've got an uploadify form working beautifully, but I'd like to change the settings programatically and I'm getting an error.

Uploadify is initiated on document.ready and I'm trying to bind the updateSettings to a button click (also done in the document.ready). I have also tried using the updateSettings function outside of the document.ready - actually on the button or just inline script to get the same error.

The error is

Error: document.getElementById(a(this).attr("id") + "Uploader").updateSettings is not a function

And my code currently looks like

<script>
$(document).ready(function(){

  $('#uploadify').uploadify({
    'uploader'  : 'uploadify.swf',
    'script'    : 'uploadify.php',
    'cancelImg' : 'cancel.png',
    'auto'      : true,
    'folder'    : '/uploads'
  });

  $("#changeIt").click(function(){
    $("#uploadify").uploadifySettings("folder","something_else");
  });

});
</script>

<input type="file" name="uploadify" id="uploadify" />

<a id="changeIt" src="#">Change the upload dir</a>

Like I say, I've tried adding the uploadifySettings outside the document.ready, I've also tried adding it right in an onclick in the a tag itself to get the same error. I'd really appreciate any help.

Answer 1

You code is wrong. Uploadify cannot binded to a <input type="file">, only to a <div/>. See the documentation and the example in the uploadify site.

To have progressive enhancement, I have both element, <input type="file"/> and an empty <div/>. Then in javascript code, I remove the input element and then initialize uploadify.

<input type="file" name="uploadify" />
<div id="uploadify"></div>

<script type="text/javascript">
    jQuery(function($){
      $("input[name='uploadify']").hide().remove();
      $("#uploadify").uploadify({UPLOADIFY_PARAM});
      //a click handler to change uploadify param
      //...
    });
    </script>

Btw, I never consider the folder parameter from uploadify. I define the upload folder in the server side scripting.

Answer 2

I had the same problem. I don't know how to solve it properly, but I can suggest to do it in this way.

$("#uploadify").uploadify({
'script' : '#scriptlink#',
'folder' : 'uploads',
... your other params ...
});

// In your bind function

var uploadParams = $("#uploadifyUploader param[name='flashvars']");
uploadParams.attr({value: uploadParams.attr('value').replace('#scriptlink#', 'your link to uploader') })

Don't forget about ID: #uploadify => #uploadifyUploader, #anotherID => #anotherIDUploader and so on.

I hope it'll be usefull.

Answer 3

I've encountered the same problem. It seems that there's a bug with auto:true, as I have another uploadify on the same page, with auto:false, and uploadifySettings works perfect. I've made a workaround: - set auto to false - onSelect, submit the upload, like this:

...
'onSelect'  : function(event, data){
                            $('#someID').uploadifySettings('param', 'value');
                            $('#someID').uploadifyUpload();
                        }
...

hth