JS Uncaught Error: Invalid Upload Button

Question

I'm using pandastream's js uploader to upload videos. I'm following the documentation here

However, I get the following console error:

 Uncaught Error: Invalid upload button. panda-uploader.min.js:112
(anonymous function) panda-uploader.min.js:112
(anonymous function) (index):27

The relevant lines in my HTML file are

<script src="//cdn.pandastream.com/u/2.0/panda-uploader.min.js"></script>
<script src="/static/js/jquery-1.10.2.js"></script>
<script type="text/javascript">
var upl = panda.uploader.init({
  'buttonId': 'browse-files',
  'onProgress': function(file, percent) {
    console.log("progress", percent, "%");
  },
  'onSuccess': function(file, data) {
    $("#new_video")
      .find("[name=panda_video_id]")
        .val(data.id)
      .end()
      .submit();
  },
  'onError': function(file, message) {
    console.log("error", message);
  },
});
</script> 

<form action=""  id="video_upload" method="post">
<input type="hidden" name="file_video_id"/>


 <div id="browse-files" class="btn btn-default btn-lg">Choose file</div>
                </form>

What am I doing wrong?

Answer 1

total script must come after html element, the error occurs due to there is no element in the browser created at the time of reading script by browser

<form action=""  id="video_upload" method="post">
<input type="hidden" name="file_video_id"/>


<div id="browse-files" class="btn btn-default btn-lg">Choose file</div>
</form>

<script type="text/javascript">
var upl = panda.uploader.init({
  'buttonId': 'browse-files',
  'onProgress': function(file, percent) {
    console.log("progress", percent, "%");
  },
  'onSuccess': function(file, data) {
    $("#new_video")
      .find("[name=panda_video_id]")
        .val(data.id)
      .end()
      .submit();
  },
  'onError': function(file, message) {
    console.log("error", message);
  },
}); 
</script>