Cannot Find Placeholder Element in SWFUpload

Question

Hello everyone,

I am trying to implement an SWFUpload on a form I have. However, it is not identifying the placeholder. My code is below, can someone help? I'm using jQuery if that helps.

Header:

<script type="text/javascript" src="{{ MEDIA_URL }}/js/SWFUpload-2.5.0/swfupload/swfupload.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}/js/SWFUpload-2.5.0/swfupload/swfupload.cookies.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}/js/foo.js"></script>
<script type="text/javascript">
 $(swfupload("{% url swfupload %}","{{ MEDIA_URL }}/js/SWFUpload-2.5.0/swfupload/swfupload.swf"));  
</script>

Body:

<div id="upload_btn"></div>

Javascript (foo.js):

swfupload = function(upload_url, flash_url) {
    var swfupload_real = new SWFUpload({
     debug: false,
     upload_url: upload_url,
     flash_url: flash_url,
     button_placeholder_id: "upload_btn",
     button_width: "40",
     button_height: "16",
     button_cursor: SWFUpload.CURSOR.HAND,
     button_text: "Click",
     file_size_limit: "20 MB",
     file_dialog_complete_handler: function() { this.startUpload(); },
     upload_complete_handler: function() { this.startUpload(); },
    });
};

Edit: I tried looking in the source code of SWFUpload.js and discovered that at the point where it was trying to find the element, it does this:

targetElement = document.getElementById(this.settings.button_placeholder_id) || this.settings.button_placeholder;

I tried seeing what was going on, and unbelievably, document.GetElementByID returns null while $('#'+this.settings.button_placeholder_id) returns the object! I'd rather not modify the library to use another dependancy. Does anyone know why this might be?

Answer 1

My javascript was fubared. It was solved with the following:

<script type="text/javascript">
 upload_url = "{% url edit-story-swfupload %}";
 flash_url = "{{ MEDIA_URL }}/js/SWFUpload-2.5.0/swfupload/swfupload.swf";
 window.onload = swfupload_init;
</script>


swfupload_init = function() {
    var swfupload = new SWFUpload({
      debug: false,
      upload_url: upload_url,
      flash_url: flash_url,
      button_placeholder_id: "upload_btn",
      button_width: "40",
      button_height: "16",
      button_cursor: SWFUpload.CURSOR.HAND,
      button_text: "Click",
      file_size_limit: "20 MB",
      file_dialog_complete_handler: function() { this.startUpload(); },
      upload_complete_handler: function() { this.startUpload(); },
    });
}