Ошибка JS Uncaught: неверная кнопка загрузки

Question

Я использую js-загрузчик Pandastream для загрузки видео. Я следую за документацией здесь

Тем не менее, я получаю следующую ошибку консоли:

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

Соответствующие строки в моем HTML-файле

<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>

Что я делаю неправильно?

Answer 1

Итоговый скрипт должен следовать за элементом html, ошибка возникает из-за того, что в браузере нет элемента, созданного во время чтения скрипта браузером

<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>